jQuery的validate插件使用整理传智播客王昭E精.docx
- 文档编号:25565698
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:7
- 大小:19.89KB
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.附录
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery validate 插件 使用 整理 传智播客王昭