jquery的validate插件使用整理.doc

第一部分：HelloWorld1. jQuery.validate插件的作用jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。2. HelloWorld说明：需要JQuery版本：1.2.6+步骤：1， 导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒2， 指定哪个（或哪些）表单要在提交前先进行验证 $(function() $(#testForm).validate(); );3， 指定每个字段的验证规则名称 *其中class=required 表示本字段必须要填写。效果如下图： 第二部分：基础知识1. 指定验证规则的方式1.1. 把验证规则写到字段元素的class属性中例：用户名：电子邮件：密码：再次输入密码：以上用了两种方式：1， 指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class=required email。2， 使用JSON对象，指定多个属性，如：class=required: true, minlength: 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 , password2: 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必须输入合法的数字(负数，小数)digits:true必须输入整数creditcard: 必须输入合法的信用卡号equalTo:expr输入值必须和$(“expr”)的值相同，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 输入值不能小于10说明：1， remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。2， 例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码： $().ready(function() $.ajaxSetup ( cache: false /关闭ajax相应的缓存 ); );3， 某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。3. 有关错误提示消息3.1. 更改默认的错误提示消息jQuery.extend(jQuery.validator.messages, required: 请填写本字段, remote: 验证失败, email: 请输入正确的电子邮件, url: 请输入正确的网址, date: 请输入正确的日期, dateISO: 请输入正确的日期 (ISO)., number: 请输入正确的数字, digits: 请输入正确的整数, creditcard: 请输入正确的信用卡号, equalTo: 请再次输入相同的值, accept: 请输入指定的后缀名的字符串, 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 的值);3.2. 仅对当前表单改变提示消息方法一：在class中指定某验证规则的错误消息 （提示：使用时不能换行）方法二：在调用validate()方法时指定某验证规则的错误消息$(function() $(#myForm).validate( messages: username: required: 请填写用户名 , email: required: 请填写email, email: 请填与正确的email ););3.3. 设置错误消息的显示样式指定label.error的样式就可以了，如下： label.error margin-left: 10px; color: red; 说明：label.error指class为error的label元素，如： 第三部分：扩展1. 自定义验证规则除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：jQuery.validator.addMethod(name,function,message)其中:1， name为验证