jquery.validate.js表单验证
一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API:http://jquery.bassistance.de/api-browser/plugins.html
?
官方文档：http://docs.jquery.com/Plugins/Validation/Methods
?
当前版本：1.5.5
需要JQuery版本：1.2.6+,兼容1.3.2
?
二、默认校验规则
(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:"Thisfieldisrequired.",
??remote:"Pleasefixthisfield.",
??email:"Pleaseenteravalidemailaddress.",
??url:"PleaseenteravalidURL.",
??date:"Pleaseenteravaliddate.",
??dateISO:"Pleaseenteravaliddate(ISO).",
??dateDE:"BittegebenSieeing眉ltigesDatumein.",
??number:"Pleaseenteravalidnumber.",
??numberDE:"BittegebenSieeineNummerein.",
??digits:"Pleaseenteronlydigits",
??creditcard:"Pleaseenteravalidcreditcardnumber.",
??equalTo:"Pleaseenterthesamevalueagain.",
??accept:"Pleaseenteravaluewithavalidextension.",
??maxlength:$.validator.format("Pleaseenternomorethan{0}characters."),
??minlength:$.validator.format("Pleaseenteratleast{0}characters."),
??rangelength:$.validator.format("Pleaseenteravaluebetween{0}and{1}characterslong."),
??range:$.validator.format("Pleaseenteravaluebetween{0}and{1}."),
??max:$.validator.format("Pleaseenteravaluelessthanorequalto{0}."),
??min:$.validator.format("Pleaseenteravaluegreaterthanorequalto{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.将校验规则写到控件中
$().ready(function(){
$("#signupForm").validate();
});
?
??
????Firstname
????
??
E-Mail
Password
确认密码
??
????
??
使用class="{}"的方式，必须引入包：jquery.metadata.js
可以使用如下的方法，修改提示内容：
class="{required:true,minlength:5,messages:{required:''请输入内容''}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="{required:true,minlength:5,equalTo:''#password''}"
另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项）
Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.
例如：
meta:"validate"
?
再有一种方式：
$.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，将调用默认的信息
??
????Firstname
????
??
E-Mail
Password
确认密码
??
????
??
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：CallbackDefault:把错误信息放在验证的元素后面?
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面?
errorPlacement:function(error,element){??
??error.appendTo(element.parent());??
}
//示例：
?
??FirstName
??
??
|
??
????
????14/02/07
??
??
????
????02/14/07
??
?? |
??
??
????
??????
??????IhavereadandaccepttheTermsofUse.
????
??
|
errorPlacement:function(error,element){
??if(element.is(":radio"))
????error.appendTo(element.parent().next().next());
??elseif(element.is(":checkbox"))
????error.appendTo(element.next());
??else
????error.appendTo(element.parent().next());
}
?
代码的作用是：一般情况下把错误信息显示在 | 中，如果是radio显示在 | 中，如果是checkbox显示在内容的后面
errorClass：StringDefault:"error"?
指定错误提示的css类名，可以自定义错误提示的样式
errorElement：StringDefault:"label"?
用什么标签标记错误，默认的是label你可以改成em
errorContainer：Selector?
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer:"#messageBox1,#messageBox2"
errorLabelContainer：Selector?
把错误信息统一放在一个容器里面。
wrapper：String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏
errorContainer:"div.error",
errorLabelContainer:$("#signupFormdiv.error"),
wrapper:"li"
?
设置错误提示的样式，可以增加图标显示
input.error{border:1pxsolidred;}
label.error{
background:url("./demo/images/unchecked.gif")no-repeat0px0px;
padding-left:16px;
padding-bottom:2px;
font-weight:bold;
color:#EA5200;
}
label.checked{
background:url("./demo/images/checked.gif")no-repeat0px0px;
}
success：String,Callback?
要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数
success:function(label){
??//set astextforIE
??label.html(" ").addClass("checked");
??//label.addClass("valid").text("Ok!")
}
添加"valid"到验证元素,在CSS中定义的样式
success:"valid"
?
?
onsubmit：BooleanDefault:true?
提交时验证.设置唯false就用其他方法去验证
onfocusout：BooleanDefault:true?
失去焦点是验证(不包括checkboxes/radiobuttons)?
onkeyup：BooleanDefault:true?
在keyup时验证.
onclick：BooleanDefault:true?
在checkboxes和radio点击时验证
focusInvalid：BooleanDefault:true?
提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup：BooleanDefault:false?
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和focusInvalid一起用
?
//重置表单
?
$().ready(function(){
varvalidator=$("#signupForm").validate({
????submitHandler:function(form){
??????alert("submitted");??
??????form.submit();
????}???
??});
??$("#reset").click(function(){
????validator.resetForm();
??});
});
remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
remote:"check-email.php"
remote:{
??url:"check-email.php",??//后台处理程序
??type:"post",???????//数据发送方式
??dataType:"json",?????//接受数据格式??
??data:{??????????//要传递的数据
????username:function(){
??????return$("#username").val();
????}
??}
}
远程地址只能输出"true"或"false"，不能有其它输出
?
?
addMethod：name,method,message
自定义验证方法
//中文字两个字节
jQuery.validator.addwww.shanxiwang.netMethod("byteRangeLength",function(value,element,param){
??varlength=value.length;
??for(vari=0;i
????if(value.charCodeAt(i)>127){
??????length++;
????}
??}
returnthis.optional(element)||(length>=param[0]&&length<=param[1]);??
},$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
?
//邮政编码验证??
jQuery.validator.addMethod("isZipCode",function(value,element){??
??vartel=/^[0-9]{6}$/;
??returnthis.optional(element)||(tel.test(value));
},"请正确填写您的邮政编码");
radio和checkbox、select的验证
radio的required表示必须选中一个
checkbox的required表示必须选中
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
?
select的required表示选中的value不能为空
??
??Buga
??Baga
??Oi
select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
??Banana
??Apple
??Peach
??Turtle
项目中使用的jQuery添加的校验的方法
$(document).ready(function(){????
??????
?/设置默认属性/????
?$.validator.setDefaults({????
???submitHandler:function(form){??
?????form.submit();??
???}????
?});??
??
//字符验证????
?jQuery.validator.addMethod("stringCheck",function(value,element){????
???returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);????
?},"只能包括中文字、英文字母、数字和下划线");??
??
?//中文字两个字节????
?jQuery.validator.addMethod("byteRangeLength",function(value,element,param){????
???varlength=value.length;????
???for(vari=0;i
?????if(value.charCodeAt(i)>127){????
?????length++;????
?????}????
???}????
???returnthis.optional(element)||(length>=param[0]&&length<=param[1]);????
?},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");??
??
?//身份证号码验证????
?jQuery.validator.addMethod("isIdCardNo",function(value,element){????
???returnthis.optional(element)||isIdCardNo(value);????
?},"请正确输入您的身份证号码");
????
?//手机号码验证????
?jQuery.validator.addMethod("isMobile",function(value,element){????
???varlength=value.length;??
???varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;??
???returnthis.optional(element)||(length==11&&mobile.test(value));????
?},"请正确填写您的手机号码");????
????
?//电话号码验证????
?jQuery.validator.addMethod("isTel",function(value,element){????
???vartel=/^\d{3,4}-?\d{7,9}$/;??//电话号码格式010-12345678??
???returnthis.optional(element)||(tel.test(value));????
?},"请正确填写您的电话号码");??
??
?//联系电话(手机/电话皆可)验证??
?jQuery.validator.addMethod("isPhone",function(value,element){??
???varlength=value.length;??
???varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;??
???vartel=/^\d{3,4}-?\d{7,9}$/;??
???returnthis.optional(element)||(tel.test(value)||mobile.test(value));??
??
?},"请正确填写您的联系电话");??
????
?//邮政编码验证????
?jQuery.validator.addMethod("isZipCode",function(value,element){????
???vartel=/^[0-9]{6}$/;????
???returnthis.optional(element)||(tel.test(value));????
?},"请正确填写您的邮政编码");??
??
?//开始验证??
?$(''#submitForm'').validate({??
???/设置验证规则/?
???rules:{??
?????username:{??
???????required:true,??
???????stringCheck:true,??
???????byteRangeLength:[3,15]??
?????},??
?????email:{??
???????required:true,??
???????email:true?
?????},??
?????phone:{??
???????required:true,??
???????isPhone:true?
?????},??
????address:{??
???????required:true,??
???????stringCheck:true,??
???????byteRangeLength:[3,100]??
?????}??
???},??
?????
???/设置错误信息/?
???messages:{??
?????username:{????
??????required:"请填写用户名",??
???????stringCheck:"用户名只能包括中文字、英文字母、数字和下划线",??
???????byteRangeLength:"用户名必须在3-15个字符之间(一个中文字算2个字符)"????
?????},??
?????email:{??
???????required:"请输入一个Email地址",??
???????email:"请输入一个有效的Email地址"?
?????},??
?????phone:{??
???????required:"请输入您的联系电话",??
???????isPhone:"请输入一个有效的联系电话"?
????},??
????address:{??
??????required:"请输入您的联系地址",??
??????stringCheck:"请正确输入您的联系地址",??
??????byteRangeLength:"请详实您的联系地址以便于我们联系您"?
????}??
??},??
????
??/设置验证触发事件/?
??focusInvalid:false,??
??onkeyup:false,??
????
??/设置错误信息提示DOM/?
??errorPlacement:function(error,element){????
????error.appendTo(element.parent());????
??},???
????
});??
??
});
?
supplier-commons-vacation.js
?
//定义订单的公共的函数方法
?functiondefine_common_method(){
?
??//设置默认的操作
???$.validator.setDefaults({??
???submitHandler:function(form){form.submit();}??
????});?
??
???//添加自定义校验函数
???$.validator.addMethod("charNo",function(value,element){??
??varlength=value.length;?
??varyour_tel=/[\W]/g;
??returnthis.optional(element)||(length<=8&&!your_tel.test(value));??
?},"请输入英文字符或数字！");
??
?//添加验证操作名称的校验函数
?$.validator.addMethod("charString",function(value,element){??
???varlength=value.length;?
???varyour_tel=/[^\a-zA-Z\u4E00-\u9FA5]/g;
???varyour_tel2=/^[A-Za-z]$/;
???returnthis.optional(element)||(length<=20&&!your_tel.test(value));??
?},"请输入中文或英文名称");?
??
?//验证手机号码（仅仅13和15开头）
?$.validator.addMethod("isPhone",function(value,element){??
??????varlength=value.length;??
????varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;??
?????vartel=/^\d{3,4}-?\d{7,9}$/;??
????returnthis.optional(element)||(tel.test(value)||mobile.test(value));??
?????},"请正确填写您的联系电话或者手机");??
??
?}
?
supplier-finance.js
jQuery(function($){
?
?//绑定所有的事件
?$(document).ready(function(){
?bind_component_event();
?});
?
?
?//绑定的公共的事件
?functionbind_component_event(){
??//定义一些公共的方法
??define_common_method();
??
??//环游供应商付款的验证（度假）?
??bind_checkCondition_component_event();
???
???
??//环游供应商付款验证的（供应商）
??bind_supplierConditionForm_component_event();
?}
?
?//环游供应商付款（度假）的验证?
?functionbind_checkCondition_component_event(){
??
?//待收款款订单验证
?$("#checkConditionForm").validate({
??event:"submit",
??errorPlacement:function(error,element){
??},
??rules:{
???"searchCon.accountNo":{
???charNo:true
???},
???"searchCon.supplierName":{
???charString:true
???}
??},
??messages:{
???"searchCon.accountNo":{
????charNo:"请输入正确的对账编号！"
????},
????"searchCon.supplierName":{
????charString:"请输入正确的供应商名称！"
????}
??},
???
??//设置验证触发事件
??focusInvalid:false,
??onkeyup:false,
???????
?????//设置错误信息提示DOM??
??errorPlacement:function(error,element){
???error.appendTo(element.parent());
??}
???
???
?});
?}
?//环游供应商付款的验证（供应商）?
?functionbind_supplierConditionForm_component_event(){
??
?//待收款款订单验证
?$("#supplierConditionForm").validate({
??event:"submit",
??errorPlacement:function(error,element){
??},
??rules:{
???"searchCon.accountNo":{
???charNo:true
???},
???"searchCon.supplierName":{
???charString:true
???}
??},
??messages:{
???"searchCon.accountNo":{
????charNo:"请输入正确的对账编号！"
????},
????"searchCon.supplierName":{
????charString:"请输入正确的供应商名称！"
????}
??},
???
??//设置验证触发事件
??focusInvalid:false,
??onkeyup:false,
???????
?????//设置错误信息提示DOM??
??errorPlacement:function(error,element){
???error.appendTo(element.parent());
??}
?});
?}
});
?
|
