JQUERY的VALIDATE插件使用整理

★第一部分：HelloWorld

1.jQuery.validate插件的作用

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

2.HelloWorld

说明：需要JQuery版本：1.2.6+

步骤：

1，导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒

3，指定每个字段的验证规则

名称*

其中class="required"表示本字段必须要填写。

效果如下图：

★第二部分：基础知识

1.指定验证规则的方式

1.1.把验证规则写到字段元素的class属性中

例：

用户名：

电子邮件：

密码：

class="{required:true,minlength:3}">

再次输入密码：

class="{equalTo:'[#password1]'}required">

以上用了两种方式：

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例子：#fieldId

accept:"gif|png|jpg"输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀

之间用’|’隔开

maxlength:5输入长度最多是5的字符串(汉字算一个字符) minlength:3输入长度最小是3的字符串(汉字算一个字符) rangelength:[5,10]输入长度必须介于5和10之间的字符串")(汉字算一个字

符)

range:[5,10]输入值必须介于5和10之间

max:5输入值不能大于5

min: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中指定某验证规则的错误消息

class="{

required:true,accept:'zip',

messages:{required:'请选择文件',accept:'请选择正确的文件'}

}">（提示：使用时不能换行）

方法二：在调用validate()方法时指定某验证规则的错误消息

$(function(){

$("#myForm").validate({

messages:{

username:{required:"请填写用户名"},

email:{required:'请填写email',email:"请填与正确的email"} }

});

});

3.3.设置错误消息的显示样式

指定label.error的样式就可以了，如下：

说明：label.error指class为error的label元素，如：

★第三部分：扩展

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.附录