jQuery的validate插件使用整理传智播客王昭E精.docx
《jQuery的validate插件使用整理传智播客王昭E精.docx》由会员分享，可在线阅读，更多相关《jQuery的validate插件使用整理传智播客王昭E精.docx（7页珍藏版）》请在冰豆网上搜索。
jQuery的validate插件使用整理传智播客王昭E精
★第一部分：
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属性中
例：
用户名：
required">
电子邮件：
requiredemail">
密码：
id="password1"
class="{required:
true,minlength:
3}">
再次输入密码：
class="{equalTo:
'[#password1]'}required">
以上用了两种方式：
1，指定多个class名称（验证规则），多个class名称之间用空格隔开，如：
class="requiredemail"。
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”.val（的值相同，
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的样式就可以了，如下：
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.附录
升级会员 