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

1、电子邮件：required email ">1. jQuery.validate 插件的作用jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很 好的支持。2. HelloWorld说明：需要JQuery版本：1.2.6+ 步骤:1，导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒3，指定每个字段的验证规则名称*其中class="required"表示本字段必须要填写。效果如下图:This fl eld i

2、s rbqpired.第二部分：基础知识1. 指定验证规则的方式1.1.把验证规则写到字段元素的class属性中例:用户名:required"密码：id=" password1"Class=trequired: true, mi nie ngth: 3">再次输入密码:class="equalTo:'# passwordi' required">以上用了两种方式:1，指定多个class名称（验证规则），多个class名 称之间用空格隔开，如：class="required email"。

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

4、o n( $("#testForm".validate(rules: logi nN ame: required: true, mi nien gth: 2,p assword: required: true ,p assword2: equalTo: "# password1" ;2. 可以使用哪些验证规则（内置的验证规则）required:true必填字段使remote:"/checkName.do"用 ajax 方 式 访 问 ” /checkName.do,通过返回 true 或false表示输入值通过或未通过验证email:

5、true必须输入正确格式的电子邮件url:true必须输入正确格式的网址date:true必须输入正确格式的日期datelSO:true必须输入正确格式的日期（ISO，例如：2010-01-01, 2010/01/01 只验证格式，不验证有效性nu mber:true必须输入合法的数字（负数，小数digits:true必须输入整数creditcard:必须输入合法的信用卡号equalTo:"ex pr"输入值 必须和$（ “expr” .v的值相同，expr例子：#fieldldacce pt: "gif| png|jpg"输入拥有合法后缀名的字符串（上

6、传文件的后 缀），多个后缀之间用'隔开maxle ngth:5输入长度最多是5的字符串（汉字算一个字符mi nien gth:3输入长度最小是3的字符串（汉字算一个字符ran gele ngth:5,10输入长度必须介于 5和10之间的字符串"（汉字算一个字符ran ge:5,10输入值必须介于5和10之间max:5min :10输入值不能大于5输入值不能小于10说明:1，remote是远程验证。比如注册验证用户名是否已 被注册，返回值只能是true （验证成功）或false（验证失败）。在访问指定的url时，会自动把当前 字段的值做为参数传递过去（以字段的 name值为 k

7、ey，value为参数值）。2,例如使用remote验证用户名是否存在，当添加 一个用户后，在当前窗口中（同一个窗口），再次 添加一个同名的用户，validate不能提示该用户已存 在，这是因为缓存的原因，jquery仍认为该用户名可 用。解决方法是在页面中添加如下代码：$(.ready(f un cti on( $.ajaxSet up ( cache: false /关闭ajax相应的缓存 ； ;3，某些属性值中的引号不能省略，否则出错。如 acceP、equalTo等，因为这时他需要的是一个字符 串。3. 有关错误提示消息3.1. 更改默认的错误提示消息jQuery.exte nd(jQ

8、uery.validator.messages, required:"请填写本字段", remote:"验证失败", email:"请输入正确的电子邮件", url:"请输入正确的网址", date:"请输入正确的日期", datelSO:"请输入正确的日期（ISO.", number:'请输入正确的数字", digits:"请输入正确的整数", creditcard:"请输入正确的信用卡号" equalTo:'

9、;请再次输入相同的值", accep t:'请输入指定的后缀名的字符串", maxlength: jQuery.validator.format("允许的最大长度为0个字符", miniength: jQuery.validator.format("允许的最小长度为0个字符", rangelength: jQuery.validator.format("允许的长度为0和1之间", range: jQuery.validator.format("请输入介于0和1之间的值", max: jQ

10、uery.validator.format("请输入一个最大为0的值",min: jQuery.validator.format("请输入一个最小为0的值" ;3.2. 仅对当前表单改变提示消息方法一：在class中指定某验证规则的错误消息class=" required: true, acce pt: 'z ip', messages: required:请选择文件',accept:请选择正确的 文件'"> （提示：使用时不能换行）方法二：在调用validate（方法时指定某验证规则的错 误消息

11、$(fun ctio n( $("#myForm".validate(messages:username: required:"请填写用户名",email: required:'请填写 email', email:"请填与正确 的 email"；3.3. 设置错误消息的显示样式指定labei.error的样式就可以了，如下:说明：labei.error指 class为 error 的 label 元素，如:user name” class="error">第三部分：扩展1.自定义验证规则除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod（方法实现的，语法 为:jQuery.validator.addMethod(” name",fu nctio n,messa