jQuery的validate插件使用整理传智播客王昭E精.docx

1、jQuery的validate插件使用整理传智播客王昭E精 第一部分：HelloWorld1. jQuery.validate插件的作用jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。2. HelloWorld说明：需要JQuery版本：1.2.6+步骤：1， 导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒3， 指定每个字段的验证规则名称 *其中class=required 表示本字段必须要填写。效果如下图： 第二部分：基础知

2、识1. 指定验证规则的方式1.1. 把验证规则写到字段元素的class属性中例：用户名：required电子邮件：required email密码：id=password1class=required: true, minlength: 3再次输入密码：class=equalTo:#password1 required以上用了两种方式：1， 指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class=required email。2， 使用JSON对象，指定多个属性，如：class=required: true, minlength: 3。可以为某验证规则指定所用的参

3、数，如minlength规则需要指定最小长度，这里为3。3， 混合使用，如：class=equalTo:#password1 required。说明：1， 如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。2， 如果表单字段的name不能重复，则只有最前面的配置起作用。1.2. 调用validate(方法时指定验证规则$(function( $(#testForm.validate(rules: loginName: required: true, minlength: 2,password: required: true ,pass

4、word2: equalTo: #password1 ;2. 可以使用哪些验证规则（内置的验证规则）required:true必填字段remote:/checkName.do 使用ajax方式访问”/checkName.do”，通过返回true或false表示输入值通过或未通过验证email:true必须输入正确格式的电子邮件url:true 必须输入正确格式的网址date:true必须输入正确格式的日期dateISO:true必须输入正确格式的日期(ISO，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性number:true必须输入合法的数字(负数，小数digit

5、s:true必须输入整数creditcard: 必须输入合法的信用卡号equalTo:expr输入值必须和$(“expr”.val(的值相同，expr例子：#fieldIdaccept: gif|png|jpg输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用|隔开maxlength:5输入长度最多是5的字符串(汉字算一个字符minlength:3输入长度最小是3的字符串(汉字算一个字符rangelength:5,10输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符range:5,10输入值必须介于 5 和 10 之间max:5 输入值不能大于5min:10 输入值不能小

6、于10说明：1， remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。2， 例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：$(.ready(function($.ajaxSetup (cache: false /关闭ajax相应的缓存;3，

7、某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。3. 有关错误提示消息3.1. 更改默认的错误提示消息jQuery.extend(jQuery.validator.messages, required: 请填写本字段,remote: 验证失败,email: 请输入正确的电子邮件,url: 请输入正确的网址,date: 请输入正确的日期,dateISO: 请输入正确的日期 (ISO.,number: 请输入正确的数字,digits: 请输入正确的整数,creditcard: 请输入正确的信用卡号,equalTo: 请再次输入相同的值,acce

8、pt: 请输入指定的后缀名的字符串,maxlength: jQuery.validator.format(允许的最大长度为 0 个字符,minlength: jQuery.validator.format(允许的最小长度为 0 个字符,rangelength: jQuery.validator.format(允许的长度为0和1之间,range: jQuery.validator.format(请输入介于 0 和 1 之间的值,max: jQuery.validator.format(请输入一个最大为 0 的值,min: jQuery.validator.format(请输入一个最小为 0 的值

9、;3.2. 仅对当前表单改变提示消息方法一：在class中指定某验证规则的错误消息class=required: true, accept: zip, messages: required: 请选择文件, accept:请选择正确的文件 （提示：使用时不能换行）方法二：在调用validate(方法时指定某验证规则的错误消息$(function( $(#myForm.validate(messages:username: required: 请填写用户名 , email: required: 请填写email, email: 请填与正确的email;3.3. 设置错误消息的显示样式指定label

10、.error的样式就可以了，如下：p 说明：label.error指class为error的label元素，如：username class=error 第三部分：扩展1. 自定义验证规则除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod(方法实现的，语法 为：jQuery.validator.addMethod(name,function,message其中:1， name为验证规则的名称2， function定义验证的规则。参数有?。返回值为?。3， message是验证失败时的提示信息。2. 让错误提示信息显示到指定的位置$(function($(form.validate(wrapper: div;3. 对于radio与checkbox等的验证指定4. 附录