jQueryvalidate插件使用整理.docVIP

第一部分：HelloWorld jQuery.validate插件的作用 jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。 HelloWorld 说明：需要JQuery版本：1.2.6+ 步骤： 导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒script type=text/javascript src=jquery.jsscript type=text/javascript src=jquery.metadata.jsscript type=text/javascript src=jquery.validate.js 指定哪个（或哪些）表单要在提交前先进行验证script type=text/javascript $(function(){ $(#testForm).validate(); }); /script 指定每个字段的验证规则名称 *input type=text name=loginName class=required其中class=required 表示本字段必须要填写。 效果如下图： 第二部分：基础知识 指定验证规则的方式 把验证规则写到字段元素的class属性中 例： 用户名：input type=password name=password class=required 电子邮件：input type=text name=email class=required email 密码：input type=password name=password id=password1 class={required: true, minlength: 3} 再次输入密码：input type=password name=password2 class={equalTo:[#password1]} required 以上用了两种方式： 指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class=required email。 使用JSON对象，指定多个属性，如：class={required: true, minlength: 3}。可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。 混合使用，如：class={equalTo:[#password1]} required。 说明： 如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。 如果表单字段的name不能重复，则只有最前面的配置起作用。 调用validate()方法时指定验证规则 $(function() { $(#testForm).validate({ rules: { loginName:{ required: true, minlength: 2}, password: { required: true }, password2: { equalTo: #password1 } } }); }); 可以使用哪些验证规则（内置的验证规则） required:true 必填字段 remote:/checkName.do 使用ajax方式访问”/checkName.do”，通过返回true或false表示输入值通过或未通过验证 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期 dateISO:true 必须输入正确格式的日期(ISO)，例如：2010-01 number:true 必须输入合法的数字(负数，小数) digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:expr 输入值必须和$(“expr”)的值相同，expr例子：#fieldId accept: gif|png|jpg 输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’|’隔开 maxlength:5 输入长度最多是5的字符串(汉字算一个字符) minlength:3 输入长度最小是3的字符串(汉字算一个字符) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串)(汉字算一个字符) range:[5,10] 输入值必须介于 5 和 1