jquery.validate的使用说明介绍


Posted in Javascript onNovember 12, 2013

一、准备工作
需要JQuery版本:1.2.6+, 兼容 1.3.2

官网地址:http://jqueryvalidation.org/

二、默认校验规则
(1)required:true 必输字段 
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值 
(3)email:true 必须输入正确格式的电子邮件 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 
(7)number:true 必须输入合法的数字(负数,小数) 
(8)digits:true 必须输入整数 
(9)creditcard: 必须输入合法的信用卡号 
(10)equalTo:"#field" 输入值必须和#field相同 
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀) 
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10 

三、默认的提示

messages: {  
required: "This field is required.",  
remote: "Please fix this field.",  
email: "Please enter a valid email address.",  
url: "Please enter a valid URL.",  
date: "Please enter a valid date.",  
dateISO: "Please enter a valid date (ISO).",  
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",  
number: "Please enter a valid number.",  
numberDE: "Bitte geben Sie eine Nummer ein.",  
digits: "Please enter only digits",  
creditcard: "Please enter a valid credit card number.",  
equalTo: "Please enter the same value again.",  
accept: "Please enter a value with a valid extension.",  
maxlength: $.validator.format("Please enter no more than {0} characters."),  
minlength: $.validator.format("Please enter at least {0} characters."),  
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),  
range: $.validator.format("Please enter a value between {0} and {1}."),  
max: $.validator.format("Please enter a value less than or equal to {0}."),  
min: $.validator.format("Please enter a value greater than or equal to {0}.")  
}, 

如需要修改,可在js代码中加入:
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} 的值")  
});

推荐做法,将此文件放入 messages_cn.js中,在页面中引入

四、使用方式
1.将校验规则写到控件中

<mce:script src="../js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script>  
<mce:script src="../js/jquery.validate.js" mce_src="js/jquery.validate.js" type="text/javascript"></mce:script>  
<mce:script src="./js/jquery.metadata.js" mce_src="js/jquery.metadata.js" type="text/javascript"></mce:script>  
<mce:script type="text/javascript"><!--
$().ready(function() {  
$("#signupForm").validate();  
});
// --></mce:script>  
<form id="signupForm" method="get" action="">  
<p>  
<label for="firstname">Firstname</label>  
<input id="firstname" name="firstname" class="required" />  
</p>  
<p>  
<label for="email">E-Mail</label>  
<input id="email" name="email" class="required email" />  
</p>  
<p>  
<label for="password">Password</label>  
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />  
</p>  
<p>  
<label for="confirm_password">确认密码</label>  
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />  
</p>  
<p>  
<input class="submit" type="submit" value="Submit"/>  
</p>  
</form> 

使用class="{}"的方式,必须引入包:jquery.metadata.js 可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages: {required:'请输入内容'}}"在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class=" {required:true,minlength:5,equalTo:'#password'}"另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如:
meta: "validate" <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />

再有一种方式:
$.metadata.setType("attr", "validate");这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用 2.将校验规则写到代码中  
$().ready(function() {  
$("#signupForm").validate({  
rules: {  
firstname: "required",  
email: {  
required: true,  
email: true  
},  
password: {  
required: true,  
minlength: 5  
},  
confirm_password: {  
required: true,  
minlength: 5,  
equalTo: "#password"  
}  
},  
messages: {  
firstname: "请输入姓名",  
email: {  
required: "请输入Email地址",  
email: "请输入正确的email地址"  
},  
password: {  
required: "请输入密码",  
minlength: jQuery.format("密码不能小于{0}个字符")  
},  
confirm_password: {  
required: "请输入确认密码",  
minlength: "确认密码不能小于5个字符",  
equalTo: "两次输入密码不一致不一致"  
}  
}  
});  
});//messages处,如果某个控件没有message,将调用默认的信息

<form id="signupForm" method="get" action="">  
<p>  
<label for="firstname">Firstname</label>  
<input id="firstname" name="firstname" />  
</p>  
<p>  
<label for="email">E-Mail</label>  
<input id="email" name="email" />  
</p>  
<p>  
<label for="password">Password</label>  
<input id="password" name="password" type="password" />  
</p>  
<p>  
<label for="confirm_password">确认密码</label>  
<input id="confirm_password" name="confirm_password" type="password" />  
</p>  
<p>  
<input class="submit" type="submit" value="Submit"/>  
</p>  
</form> 

required:true 必须有值
required:"#aa:checked" 表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素

五、常用方法及注意问题

1.用其他方式替代默认的SUBMIT$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});

可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});

如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});

如果一个页面中有多个表单,用
$.validator.setDefaults({
debug: true
})

3.ignore:忽略某些元素不验证
ignore: ".ignore"

4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面

指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}//示例:

<tr>  
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>  
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>  
<td class="status"></td>  
</tr>  
<tr>  
<td style="padding-right: 5px;" mce_style="padding-right: 5px;">  
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />  
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>  
</td>  
<td style="padding-left: 5px;" mce_style="padding-left: 5px;">  
<input id="dateformat_am" name="dateformat" type="radio" value="1"  />  
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>  
</td>  
<td></td>  
</tr>  
<tr>  
<td class="label"> </td>  
<td class="field" colspan="2">  
<div id="termswrap">  
<input id="terms" type="checkbox" name="terms" />  
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>  
</div>  
</td>  
</tr>errorPlacement: function(error, element) {  
if ( element.is(":radio") )  
error.appendTo( element.parent().next().next() );  
else if ( element.is(":checkbox") )  
error.appendTo ( element.next() );  
else  
error.appendTo( element.parent().next() );  
}

代码的作用是:一般情况下把错误信息显示在中,如果是radio显示在中,如果是checkbox显示在内容的后面 errorClass:String Default: "error"

指定错误提示的css类名,可以自定义错误提示的样式 errorElement:String Default: "label"

用什么标签标记错误,默认的是label你可以改成 emerrorContainer:Selector

显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大

errorContainer: "#messageBox1, #messageBox2"errorLabelContainer:Selector

把错误信息统一放在一个容器里面。 wrapper:String

用什么标签再把上边的errorELement包起来一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏errorContainer: "div.error",

errorLabelContainer: $("#signupForm div.error"),
wrapper: "li" 设置错误提示的样式,可以增加图标显示input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}success:String,Callback

要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
success: function(label) {
// set   as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

添加"valid" 到验证元素, 在CSS中定义的样式
success: "valid" nsubmit: Boolean Default: true

提交时验证. 设置唯false就用其他方法去验证
onfocusout:Boolean Default: true

失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup:Boolean Default: true

在keyup时验证.
onclick:Boolean Default: true

在checkboxes 和 radio 点击时验证
focusInvalid:Boolean Default: true

提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:Boolean Default: false

如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用 // 重置表单

$().ready(function() {  
var validator = $("#signupForm").validate({  
submitHandler:function(form){  
alert("submitted");  
form.submit();  
}   
});  
$("#reset").click(function() {  
validator.resetForm();  
});});

使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
remote: {  
url: "check-email.php", //后台处理程序  
type: "post",   //数据发送方式  
dataType: "json",   //接受数据格式  
data: { //要传递的数据  
username: function() {  
return $("#username").val();  
}  
}  
} 

远程地址只能输出 "true" 或 "false",不能有其它输出 addMethod:name, method, message
自定义验证方法
// 中文字两个字节  
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {  
var length = value.length;  
for(var i = 0; i < value.length; i++){  
if(value.charCodeAt(i) > 127){  
length++;  
}  
}  
return this.optional(element) || ( length >= param[0] && length <= param[1] );  
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  
// 邮政编码验证  
jQuery.validator.addMethod("isZipCode", function(value, element) {  
var tel = /^[0-9]{6}$/;  
return this.optional(element) || (tel.test(value));  
}, "请正确填写您的邮政编码"); 

radio和checkbox、select的验证radio的required表示必须选中一个  
<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />  
<input  type="radio" id="gender_female" value="f" name="gender"/>checkbox的required表示必须选中  
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />  
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />  
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />  
select的required表示选中的value不能为空  
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">  
<option value=""></option>  
<option value="1">Buga</option>  
<option value="2">Baga</option>  
<option value="3">Oi</option>  
</select> 

select的minlength表示选中的最小个数(可多选的 select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
radio和checkbox、select的验证radio的required表示必须选中一个  
<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />  
<input  type="radio" id="gender_female" value="f" name="gender"/>checkbox的required表示必须选中  
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />  
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />  
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />  
select的required表示选中的value不能为空  
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">  
<option value=""></option>  
<option value="1">Buga</option>  
<option value="2">Baga</option>  
<option value="3">Oi</option>  
</select>  
select的minlength表示选中的最小个数(可多选的 select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">  
<option value="b">Banana</option>  
<option value="a">Apple</option>  
<option value="p">Peach</option>  
<option value="t">Turtle</option>  
</select> 
Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
js微信分享接口调用详解
Jul 23 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
javascript 函数及作用域总结介绍
Nov 12 #Javascript
Javascript之this关键字深入解析
Nov 12 #Javascript
js hover 定时器(实例代码)
Nov 12 #Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 #Javascript
javascript实用小函数使用介绍
Nov 11 #Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 #Javascript
JS页面延迟执行一些方法(整理)
Nov 11 #Javascript
You might like
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
itchat接口使用示例
2017/10/23 Python
python中列表和元组的区别
2017/12/18 Python
彻底搞懂Python字符编码
2018/01/23 Python
python flask安装和命令详解
2019/04/02 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
自我评价范文
2013/12/22 职场文书
项目采购员岗位职责
2014/04/15 职场文书
项目合作协议书
2014/04/16 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技