Add to favorites引言：在使用jQuery的Web项目中，最基础的就是表单的验证，而且使用比较多的插件应该是jQuery Validation了。其实这个插件早就用过了，最近项目中有人问相关的问题，趁此机会来总结一下这个插件的常用API，也便于以后自己查看。最后以项目中“表单的新增和修改场景”举例，以源码DEMO的形式为你阐释具体的使用方式，也欢迎大家各抒己见，互相交流。
简介
该插件的作用主要就是用于浏览器端的表单验证，基本上可以满足多数的表单验证，同时官方网站还提供了扩展验证方法，也提供了国际化的配置。据说该插件是jQuery开发组组长开发，具有很好的评价。
准备
请到官网首页（官方地址：http://jqueryvalidation.org/）下载相关支持压缩包，博主这里使用版本jquery-validation-1.13.1（当前该插件版本是1.14.0）。
因为其是基于jQuery实现的，自然在我们的页面中需要引入jquery来支持，同时引入该插件的文件。如下：
<script src=”build/jquery-1.10.0.js”></script>
<script src=”build/jquery.validate-1.13.1.js”></script>
概念
1. rule：验证规则，就是为指定的表单元素设置验证的规则。如：
比如页面上有一个文本框，其name属性值为username，且是必填项，如下设置即可，
rules: {username: {required: true}}
2. method：即验证的方法，其实就是实现规则的方法。
比如上方的必填，就是实现required方法了，用于检查元素的值是否符合必填这个规则。
常见的验证
1. required
作用：验证必填
常见书写方式：required: true
2. remote
作用：远程验证，比如提交一个学生信息时，需要验证其学号是否唯一，需要发送请求至后台进行查询验证。
常见书写方式：
remote:{url: “test.json”,type:”post”,dataType:”json”,data:{name: function(){return jQuery(“#name”).val();}}}
3. minlength
作用：设置最小长度，用于限制表单元素的字符最小长度。
常见书写方式：minlength:5
4. maxlength
作用：设置最大长度，用于限制表单元素的字符最大长度。
常见书写方式：maxlength:100
5. rangelength
作用：设置一个长度的范围，即设置最小长度和最大长度，介于两者之间。
常见书写方式：rangelength: [8,20]
6. min
作用：设置最小值，限制表单元素的最小值。
常见书写方式：min:5
7. max
作用：设置最大值，限制表单元素的最大值。
常见书写方式：max:10
8. range
作用：设置一个值的范围，即设置表单元素的最小值和最大值，介于两者之间。
常见书写方式：range:[5,10]
9. email
作用：验证是否为emaile格式，如 abc@126.com。
常见书写方式：email:true
10. url
作用：验证是否为url格式，必须要包含http://，如 http://www.baidu.com。
常见书写方式：url:true
11. date
作用：验证是否为日期格式。这种日期检验比较宽泛，支持很多形式，这里就不列举了。注意不支持IE6。
常见书写方式：date:true
12. dateISO
作用：验证是否为ISO日期格式。例如：2009-06-23，1998/01/22 只验证格式，不验证有效性。
常见书写方式：dateISO:true
13. number
作用：验证是否为number格式，合法的数字(负数，小数)。
常见书写方式：number:true
14. digits
作用：验证是否为整数格式。
常见书写方式：digits:true
15. equalTo
作用：验证是否与指定的元素相等。
常见书写方式：
password:{required:true,rangelength:[8,20]},conformPwd:{required:true,rangelength:[8,20],equalTo:”#password”}
16. creditcard
作用：必须输入合法的信用卡号。
常见书写方式：creditcard:true
17. accept
作用：请输入拥有合法后缀名的字符串。
常见书写方式：accept:true
以上列举一些常用的验证和其常用的使用方式，一般足够用于验证了。当然如果不能满足您的需求，您可以扩展实现。
验证信息提示（Message）
插件默认的提示信息英文的，一般需要自定义来写，官方网站以及很多博客资料中（见本文下方的参考资料）都有这么一段，用于设置插件全局的提示信息，代码如下：
$.extend($.validator.messages, {required: “必选字段”,remote: “请修正该字段”,email: “请输入正确格式的电子邮件”,url: “请输入合法的网址”,date: “请输入合法的日期”,dateISO: “请输入合法的日期 (ISO).”,number: “请输入合法的数字”,digits: “只能输入整数”,creditcard: “请输入合法的信用卡号”,equalTo: “请再次输入相同的值”,accept: “请输入拥有合法后缀名的字符串”,maxlength: $.validator.format(“请输入一个长度最多是 {0} 的字符串”),minlength: $.validator.format(“请输入一个长度最少是 {0} 的字符串”),rangelength: $.validator.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),range: $.validator.format(“请输入一个介于 {0} 和 {1} 之间的值”),max: $.validator.format(“请输入一个最大为 {0} 的值”),min: $.validator.format(“请输入一个最小为 {0} 的值”)});
这样就会把默认的英文换成中文了。
不过，是否需要添加这一块全局设置代码，请根据需求来正确使用。该全局设置是非必须的，因为这个国际化的中文信息，只能用于一般的字段填写的理解上，与你当前的业务很多是不符合的，或者说很多信息提示也不到位，不能共用的。
Validate方法、Validator对象及相关方法简介
1. Validate方法
Validate是该插件的核心方法，主要用于初始化对应的表单对象，并且返回Validator对象，在该方法中可以定义表单的校验规则和常见的配置项。同时只要表单运行了该方法，后面调用这个表单对象和表单元素对象时，就拥有了Validator对象的方法了，该说明后面可以从DEMO中看出。
（1） debug
用于配置，表单提交时，只进行验证检查，但不提交表单。一般设置为true，提交表单的处理交给submitHandler方法来实现即可。
（2） rules
用于定义校验的规则。
（3） messages
用于定义验证的提示信息。
（4） submitHandler
该方法执行于，所有的表单元素验证通过之后。其中主要实现提交之后的操作，一般就用于表单的提交。
（5） invalidHandler
该方法执行于，表单元素没有验证通过之后，其中可以输出相关的验证未通过信息等。
（6） showErrors
用于配置，用于显示未验证通过的元素。
（7） errorPlacement
用于自定义错误信息的显示容器。
（8） success
执行于，表单验证通过之后。可以对表单的显示，表单联动处理等，做相关操作。
（9） highlight
用于给未通过的元素添加高亮效果。
（10） unhighlight
用于去除未通过的元素的高亮效果。
（11） ignore
用于配置对指定的元素不进行验证。注意：该参数默认值为“hidden”，即不验证隐藏的元素。
（12） focusInvalid
表示在提交表单时，未通过的验证的表单元素，是否需要获得焦点。
（13） focusCleanup
表示当未通过验证的元素获得焦点时，是否移除错误的信息。
（14） groups
用于将一组元素的验证信息，使用一个错误提示合起来显示，一般需要使用errorPlacement来控制，将错误信息放到指定位置。
（15） onsubmit
表示是否在提交时进行验证。
（16） onfocusout
表示是否在获取焦点时进行验证。
（17） onkeyup
表示是否在敲击键盘时进行验证。
（18） errorClass
用于指定错误提示的css类名，在此处可以进行自定义错误样式。
（19） validClass
用于指定验证通过的css类名。
（20） errorElement
用于指定使用什么标签（常用div，列表形式使用li），来标记错误信息。
（21） wrapper
用于指定使用什么标签把errorElement包起来。（如使用ul标签，可以与errorElement使用li标签，配合使用，展示为列表形式）
（22） errorLabelContainer
用于将错误信息统一放置到指定的容器内，容器一般在页面上已存在。
（23） errorContainer
用于显示和隐藏验证的信息，可以做自定义的实现。
2. Validator对象
Validator对象是Validate方法返回而来，下面简介一下高对象的相关的方法。
（1） Validator.form()
验证表单是否符合规则，包含所有表单元素的验证，返回true/false。
（2） Validator.element(element)
验证某个元素是否符合验证规则，返回true/false。
（3） Validator.resetForm()
恢复表单的验证状态，即将已显示的验证信息去除，这个方法需要掌握，一般用在表单的置空时。
（4） Validator.showErrors(errors)
针对某个元素显示特定的错误信息。
（5） Validator.numberOfInvalids()
返回无效的元素数量。
以下是插件Validator对象的静态方法：
（1） jQuery. validator.addMethod()
增加自定义的验证方法。官方提供了additional-methods.js，用于扩展验证等。
（2） jQuery. validator.format()
格式化字符串，用参数代替模板中的{n}。
（3） jQuery. validator.setDefault(options)
修改插件的默认设置。
（4） jQuery. validator.addClassRules(name,rules)
为某些包含名为name的class增加组合验证类型。
3. valid方法
该方法用于检查表单或其中的元素，是否符合所有的验证。
4. rules方法（常用）
（1） rules()：用于获取表单元素的校验规则
（2） rules(“add”,rules)：用于对指定的表单元素增加校验规则
（3） rules(“remove”,rules)：删除表单元素的校验规则
选择器的扩展和自定义验证方法
扩展的选择，主要如下：
（1） :blank，选择所有值为空的元素
（2） :filled，选择所有值不为空的元素
（3） :unchecked，选择所有没有选中的元素
自定义验证方法大家自行找资料实现吧，网上资料也很多。
博主认为，常用的表单验证已经够用了，如果有特殊需求，应该靠自己去写验证，只要在提交前加上自己的验证就行，不需要太过依赖插件。
另外，简单的验证，或者后台系统使用该插件还是轻便的，如果具有复杂表单业务，如OA类的系统，其实到不建议使用插件，应该自己去实现相关的验证。
实战示例
场景描述：
增删改查是每个系统必备的操作。示例主要就实现一下，会员信息的录入功能，包含增加和修改的功能。
要求：
新增的时候表单为空，会员登录名、昵称等必填字段，且都有长度限制，会员登录名需要发送至服务器进行验证是否重复等；
修改时，先获取服务端的参数并填写至表单，且会员登录名不能修改（且此时不用验证会员登录名是否重复，因为服务端已存在），其他条件一致。
下面简单说一下思路：
1. 首先页面上模拟两个操作点，一个“新增”和一个“修改”。新增时，需要验证登录名是否存在；修改时，需要先获取数据，但不需要验证登录名存在与否。
2. 新增，需要如下的步骤。
（1） 恢复表单的验证状态，
validator.resetForm();
（2） 使用表单元素的rules方法来新增规则，如下：
$(“#loginName”).rules(“add”,{remote: {url: “checkName.json”,type:”post”,dataType:”json”,data:{loginName: function(){return jQuery(“#loginName”).val();}}}});
（3） 重置表单
document.getElementById(“memberFormNode”).reset();
3. 修改时，操作类似，但需要将新增时的第二步，改成去除规则，如下：
$(“#loginName”).rules(“remove”,”remote”);
示例说明：
（1）使用了BootStrap样式表美化了页面。
（2）由于在checkName.json中设置为false，所以新增时，登录名验证的时候永远是“已存在”。
（3）在getMember.json中默认填写了表单相关的属性值，真实项目中需从服务端获取。
具体请下载源码查看，DEMO(stark-jquery-validation-demo)示例下载。
如有问题，欢迎指出；如需转载，请标明出处，谢谢！