jQuery validate验证插件使用详解


Posted in Javascript onMay 11, 2016

Validate验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。

Description

浏览器支持:IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本:1.7.0+

Usage
载入jQuery、validate

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>

DOM标签验证规则填写

<div class="form_control">
 <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
 <select class="required" data-valid="isNonEmpty" data-error="省份必填">
  <option value="">请选择省份</option>
  <option value="001">001</option>
  <option value="002">002</option>
 </select>
</div>

给需要验证的表单元素的class填入required(不建议在这个class上做其他样式)。
建议input用独立div包裹,因为验证的message是从当前input的父元素上append生成。
data-tip:在尚未验证而获取焦点时出现的提示。
data-valid:验证规则,若有组合验证,以||符号分割。
data-error:验证错误提示,对应data-valid,以||符号分割。
单选/复选比较特殊,需要添加元素包裹单选/复选集合,并在包裹元素上加验证规则。

<div class="form_control">
 <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
   <label><input type="radio" name="sex">男</label>
   <label><input type="radio" name="sex">女</label>
   <label><input type="radio" name="sex">未知</label>
 </span>
</div>
<div class="form_control">
 <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
   <label><input type="checkbox" name="label">红</label>
   <label><input type="checkbox" name="label">绿</label>
   <label><input type="checkbox" name="label">蓝</label>
 </span>
</div>

JS调用

//**注意:必须以表单元素调用validate**
 $('form').validate({
  type:{
   isChecked: function(value, errorMsg, el) {
    var i = 0;
    var $collection = $(el).find('input:checked');
    if (!$collection.length) {
     return errorMsg;
    }
   }
  },
  onFocus: function() {
   this.parent().addClass('active');
   return false;
  },
  onBlur: function() {
   var $parent = this.parent();
   var _status = parseInt(this.attr('data-status'));
   $parent.removeClass('active');
   if (!_status) {
    $parent.addClass('error');
   }
   return false;
  }
 });

jQuery validate验证插件使用详解

表单提交前的验证

$('form').on('submit', function(event) {
  event.preventDefault();
  $(this).validate('submitValidate'); //return true or false;
 });

validate内置验证规则

required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

例子:
验证用户名,密码,确认密码,主页,生日,邮箱
首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且为表单定义一个id,为需要验证的控件定义name属性,并赋值,此插件使用的是控件的name属性,而非id。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery邮箱验证.aspx.cs" Inherits="练习.jquery邮箱验证" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
  #aa{ color:Red;}
  </style>
   <script src="Jquery1.7.js" type="text/javascript"></script>
  <script src="jquery.validate.js" type="text/javascript"></script>
  <script src="messages_cn.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {


    $('#form1').validate({
      rules: {
        username: { required: true, minlength: 6, maxlength: 12 },
        password: { required: true, minlength: 6 },
        passwordok:{required: true, equalTo: "#password"},
        index: { required: true, url: true },
        birthday: { required: true, dateISO: true },
        bloodpress:{required: true,digits:true},
        email: { required: true, email: true }
    },
    errorshow: function (error, element) {
      error.appendTo(element.siblings('span'));
    }

 })
    })
  
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <table>
  <tr><td>用户名:</td><td>
  <input name="username" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>密码:</td><td>
  <input id="password" name="password" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>确认密码:</td><td>
  <input id="repassword" name="passwordok" type="text" /><span id="aa">*</span></td></tr>
   <tr><td>主页:</td><td>
  <input name="index" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>生日:</td><td>
  <input name="birthday" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>血压:</td><td>
  <input name="bloodpress" type="text" /><span id="aa">*</span></td></tr>
 <tr><td>邮箱:</td><td><input name="email" type="text" /><span id="aa">*</span></td></tr>
 <tr><td></td><td>
  <input id="Button1" type="button" value="button" /></td></tr>
</table>
  </div>
  </form>
</body>
</html>

实现如下效果:

jQuery validate验证插件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
You might like
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
详解python中的json的基本使用方法
2016/12/21 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python装饰器代码深入讲解
2021/03/01 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
优秀班集体申报材料
2014/12/25 职场文书
居住证明范文
2015/06/17 职场文书