2023年6月21日发(作者:)

实例详解jQuery表单验证插件validatevalidate插件是⼀个基于jquery的表单验证插件了⾥⾯有许多的常⽤的⼀些验证⽅法我们可以直接调⽤,具体的我们⼀起来看看。例⼦,html代码

messages_⽂件如下(es, {required: "必选字段",remote: "请修正该字段",email: "请输⼊正确格式的电⼦邮件",url: "请输⼊合法的⽹址",date: "请输⼊合法的⽇期",dateISO: "请输⼊合法的⽇期 (ISO).",number: "请输⼊合法的数字",digits: "只能输⼊整数",creditcard: "请输⼊合法的信⽤卡号",equalTo: "请再次输⼊相同的值",accept: "请输⼊拥有合法后缀名的字符串",maxlength: ("请输⼊⼀个 长度最多是 {0} 的字符串"),minlength: ("请输⼊⼀个 长度最少是 {0} 的字符串"),rangelength: ("请输⼊ ⼀个长度介于 {0} 和 {1} 之间的字符串"),range: ("请输⼊⼀个介于 {0} 和 {1} 之间的值"),max: ("请输⼊⼀个最⼤为{0} 的值"),min: ("请输⼊⼀个最⼩为{0} 的值")});关于validator插件详解主要分⼏部分te 基本⽤法te API说明te ⾃定义te 常见类型的验证代码下载地址te插件的⽂档地址te插件的主页te插件主页上提供的demo验证规则下⾯是默认校验规则,也可以⾃定义规则(1)required:true 必输字段(2)remote:"" 使⽤ajax⽅法调⽤验证输⼊值(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验证提⽰下⾯是默认的验证提⽰,官⽹有简体中⽂版的验证提⽰下载,或者通过(es⾃定义错误提⽰信息,可以将⽹站的验证提⽰⽂本统⼀到⼀个⽂件⾥。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).",number: "Please enter a valid number.",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: $.("Please enter no more than {0} characters."),minlength: $.("Please enter at least {0} characters."),rangelength: $.("Please enter a value between {0} and {1} characters long."),range: $.("Please enter a value between {0} and {1}."),max: $.("Please enter a value less than or equal to {0}."),min: $.("Please enter a value greater than or equal to {0}.")使⽤⽅式1:在控件中使⽤默认验证规则,例⼦:电⼦邮件(必填)2:可以在控件中⾃定义验证规则,例⼦:⾃定义(必填,[3,5])3:通过javascript⾃定义验证规则,下⾯的JS⾃定义了两个规则,password和confirm_password$().ready(function() {$("#form2").validate({rules: {password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {password: {required: "没有填写密码",minlength: ("密码不能⼩于{0}个字符")},confirm_password: {required: "没有确认密码",minlength: "确认密码不能⼩于{0}个字符",equalTo: "两次输⼊密码不⼀致嘛"}}});});required除了设置为true/false之外,还可以使⽤表达式或者函数,⽐如$("#form2").validate({rules: {funcvalidate: {required: function() {return $("#password").val()!=""; }}},messages: {funcvalidate: {required: "有密码的情况下必填"}}});Html密码确认密码条件验证4:使⽤meta⾃定义验证信息⾸先⽤JS设置meta$("#form3").validate({ meta: "validate" });

Htmlemail5:使⽤meta可以将验证规则写在⾃定义的标签内,⽐如validateJS设置meta$().ready(function() {$.e("attr", "validate");$("#form1").validate();});HtmlEmail6:⾃定义验证规则对于复杂的验证,可以通过hod添加⾃定义的验证规则官⽹提供的⾥包含⼀些常⽤的验证⽅式,⽐如lettersonly,ziprange,nowhitespace等例⼦// 字符验证

hod("userName", function(value, element) {return al(element) || /^[u0391-uFFE5w]+$/.test(value);}, "⽤户名只能包括中⽂字、英⽂字母、数字和下划线");

//然后就可以使⽤这个规则了$("#form1").validate({// 验证规则rules: {userName: {required: true,userName: true,rangelength: [5,10]}},/* 设置错误信息 */messages: {userName: {required: "请填写⽤户名",rangelength: "⽤户名必须在5-10个字符之间"}

},});

7:radio、checkbox、select的验证⽅式类似radio的验证性别
checkbox的验证最少选择两项选项1
选项2
选项3
select的验证下拉框8:Ajax验证⽤remote可以进⾏Ajax验证remote: {url: "url", //url地址type: "post", //发送⽅式dataType: "json", //数据格式 data: { //要传递的数据username: function() {return $("#username").val();}}}Plugin methodsName Typevalidate( options ) Returns: Validator验证所选的FORMvalid( ) Returns: Boolean检查是否验证通过rules( ) Returns: Options返回元素的验证规则rules( "add", rules ) Returns: Options增加验证规则rules( "remove", rules ) Returns: Options删除验证规则removeAttrs( attributes ) Returns: Options删除特殊属性并且返回他们Custom selectorsName Type:blank Returns: Array 没有值的筛选器:filled Returns: Array 有值的筛选器:unchecked Returns: Array 没选择的元素的筛选器UtilitiesName ( template, argument , ) Returns: String⽤参数代替模板中的 {n}。Validatorvalidate⽅法返回⼀个Validator对象, 它有很多⽅法, 让你能使⽤引发校验程序或者改变form的内容.下⾯只是列出常⽤的.form( ) Returns: Boolean验证form返回成功还是失败element( element ) Returns: Boolean验证单个元素是成功还是失败resetForm( ) Returns: undefined把前⾯验证的FORM恢复到验证前原来的状态showErrors( errors ) Returns: undefined显⽰特定的错误信息built-in Validation methodsName TypesetDefaults( defaults ) Returns: undefined改变默认的设置addMethod( name, method, message ) Returns: undefined添加⼀个新的验证⽅法. 必须包括名字,⼀个JAVASCRIPT⽅法和⼀个默认的信息addClassRules( name, rules ) Returns: undefined增加组合验证类型addClassRules( rules ) Returns: undefined增加组合验证类型built-in Validation methodsName Typerequired( ) Returns: Boolean必填验证元素required( dependency-expression ) Returns: Boolean必填元素依赖于表达式的结果.required( dependency-callback ) Returns: Boolean必填元素依赖于回调函数的结果.remote( url ) Returns: Boolean请求远程校验。url通常是⼀个远程调⽤⽅法minlength( length ) Returns: Boolean设置最⼩长度maxlength( length ) Returns: Boolean设置最⼤长度rangelength( range ) Returns: Boolean设置⼀个长度范围[min,max]min( value ) Returns: Boolean设置最⼩值.max( value ) Returns: Boolean设置最⼤值.range( range ) Returns: Boolean设置值的范围email( ) Returns: Boolean验证电⼦邮箱格式url( ) Returns: Boolean验证连接格式date( ) Returns: Boolean验证⽇期格式(类似30/30/2008的格式,不验证⽇期准确性只验证格式)dateISO( ) Returns: Boolean研制ISO类型的⽇期格式dateDE( ) Returns: Boolean验证德式的⽇期格式(29.04.1994 or 1.1.2006)number( ) Returns: Boolean验证⼗进制数字(包括⼩数的)numberDE( ) Returns: BooleanMakes the element require a decimal number with german ( ) Returns: Boolean验证整数creditcard( ) Returns: Boolean验证信⽤卡号accept( extension ) Returns: Boolean验证相同后缀名的字符串equalTo( other ) Returns: Boolean验证两个输⼊框的内容是否相同⾃定义jquery-validate的验证⾏为1: ⾃定义表单提交设置submitHandler来⾃定义表单提交动作$(".selector").validate({submitHandler: function(form) { alert("验证通过"); }});如果需要提交表单,可以调⽤(); 或者$(form).ajaxSubmit();2: 调试模式将debug设置为true,表单不会提交,只进⾏检查,⽅便调试$(".selector").validate({debug: true})3: 设置validate的默认值使⽤setDefaults可以设置validate的默认值,⽐如默认所有表单验证都是在debug模式下进⾏$.aults({debug: true})4: 某些元素不验证设置ignore属性可以忽略某些元素不验证$(".selector").validate({ignore: "ignore"})5: 验证时机te可以很⽅便的设置在什么时候触发验证动作onsubmit: 提交时是否验证$(".selector").validate({onsubmit: false})onfocusout: 失去焦点时验证(checkboxes/radio除外)$(".selector").validate({onfocusout: false})onkeyup: 在keyup时验证$(".selector").validate({onkeyup: false})onclick: 在checkboxes、radio点击时验证.$(".selector").validate({onclick: false})6: 重写验证规则和验证提⽰信息//重写max的的验证提⽰信息$. = ("Your totals musn't exceed {0}!");//重写equal⽅法$. = function(value, element, param) {return value == param;};7: focusInvalid 是否把焦点聚焦在最后⼀个动作或者最近的⼀次出错上$(".selector").validate({focusInvalid: false})8: focusCleanup如果该属性设置为True, 那么控件获得焦点时,移除出错的class定义,隐藏错误信息,避免和 focusInvalid.⼀起⽤。$(".selector").validate({focusCleanup: true})9: meta设置meta来封装验证规则$(".selector").validate({meta: "validate",})⾃定义错误消息的显⽰⽅式默认情况下,验证提⽰信息⽤label元素来显⽰, 并且会添加css class, 通过css可以很⽅便设置出错控件以及错误信息的显⽰⽅式。/* 输⼊控件验证出错*/form { border:solid 1px red;}/* 验证错误提⽰信息*/form {width: 200px;margin-left: 10px; color: Red;}如果想⾃定义显⽰⽅式,可以修改te的默认显⽰⽅式默认⽤label显⽰错误消息,可以通过errorElement属性来修改errorElement: 错误消息的html标签$(".selector").validateerrorElement: "em"})可以在出错信息外⽤其他的元素包装⼀层。wrapper: 错误消息的外层封装html标签$(".selector").validate({wrapper: "li"})验证出错的css class默认是error,通过errorClass可以修改errorClass: 验证出错时使⽤的css class$(".selector").validate({errorClass: "invalid"})还⾃定义验证成功时的动作success: 如果值是字符串,会当做⼀个css类,如果是⼀个函数,则执⾏该函数$(".selector").validate({success: "valid"})或者success: function(label) {(" ").addClass("checked");}还可以把错误消息统⼀到⼀个容器显⽰errorLabelContainer: 将错误消息统⼀到⼀个容器显⽰$("#myform").validate({errorLabelContainer: "#messageBox"})默认情况下,错误消息是放在验证元素后⾯的,可以⾃定义错误消息的显⽰位置$(".selector").validate({errorPlacement: function(error, element) {To( ("td").next("td") );}})更进⼀步可以定义⼀个组,把⼏个地⽅的出错信息统⼀放在⼀个地⽅,⽤error Placement控制把出错信息放在哪⾥groups:定义⼀个组$(".selector").validate({groups: {username: "fname lname"},errorPlacement: function(error, element) {if (("name") == "fname" || ("name") == "lname" )After("#lastname");After(element);}})⾼亮显⽰highlight: ⾼亮显⽰,默认是添加errorClassunhighlight: 和highlight对应,反⾼亮显⽰$(".selector").validate({highlight: function(element, errorClass) {$(element).addClass(errorClass);$().find("label[for=" + + "]").addClass(errorClass);},unhighlight: function(element, errorClass) {$(element).removeClass(errorClass);$().find("label[for=" + + "]").removeClass(errorClass);}});或者可以完全⾃定义错误显⽰showErrors: 得到错误的显⽰句柄$(".selector").validate({showErrors: function(errorMap, errorList) {$("#summary").html("Your form contains " + OfInvalids()+ " errors, see details below.");tShowErrors();}})// ⼿机号码验证hod("mobile", function(value, element) {var length = ;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/return al(element) || (length == 11 && (value));}, "⼿机号码格式错误");

// 电话号码验证

hod("phone", function(value, element) {var tel = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/;return al(element) || ((value));}, "电话号码格式错误");// 邮政编码验证

hod("zipCode", function(value, element) {var tel = /^[0-9]{6}$/;return al(element) || ((value));}, "邮政编码格式错误");// QQ号码验证

hod("qq", function(value, element) {var tel = /^[1-9]d{4,9}$/;return al(element) || ((value));}, "qq号码格式错误");// IP地址验证hod("ip", function(value, element) {var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;return al(element) || ((value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));}, "Ip地址格式错误");// 字母和数字的验证hod("chrnum", function(value, element) {var chrnum = /^([a-zA-Z0-9]+)$/;return al(element) || ((value));}, "只能输⼊数字和字母(字符A-Z, a-z, 0-9)");// 中⽂的验证hod("chinese", function(value, element) {var chinese = /^[u4e00-u9fa5]+$/;return al(element) || ((value));}, "只能输⼊中⽂");// 下拉框验证$.hod("selectNone", function(value, element) {return value == "请选择";}, "必须选择⼀项");// 字节长度验证hod("byteRangeLength", function(value, element, param) {var length = ;for (var i = 0; i < ; i++) {if (deAt(i) > 127) {length++;}}return al(element) || (length >= param[0] && length <= param[1]);}, $.("请确保输⼊的值在{0}-{1}个字节之间(⼀个中⽂字算2个字节)"));

2023年6月21日发(作者:)

实例详解jQuery表单验证插件validatevalidate插件是⼀个基于jquery的表单验证插件了⾥⾯有许多的常⽤的⼀些验证⽅法我们可以直接调⽤,具体的我们⼀起来看看。例⼦,html代码

messages_⽂件如下(es, {required: "必选字段",remote: "请修正该字段",email: "请输⼊正确格式的电⼦邮件",url: "请输⼊合法的⽹址",date: "请输⼊合法的⽇期",dateISO: "请输⼊合法的⽇期 (ISO).",number: "请输⼊合法的数字",digits: "只能输⼊整数",creditcard: "请输⼊合法的信⽤卡号",equalTo: "请再次输⼊相同的值",accept: "请输⼊拥有合法后缀名的字符串",maxlength: ("请输⼊⼀个 长度最多是 {0} 的字符串"),minlength: ("请输⼊⼀个 长度最少是 {0} 的字符串"),rangelength: ("请输⼊ ⼀个长度介于 {0} 和 {1} 之间的字符串"),range: ("请输⼊⼀个介于 {0} 和 {1} 之间的值"),max: ("请输⼊⼀个最⼤为{0} 的值"),min: ("请输⼊⼀个最⼩为{0} 的值")});关于validator插件详解主要分⼏部分te 基本⽤法te API说明te ⾃定义te 常见类型的验证代码下载地址te插件的⽂档地址te插件的主页te插件主页上提供的demo验证规则下⾯是默认校验规则,也可以⾃定义规则(1)required:true 必输字段(2)remote:"" 使⽤ajax⽅法调⽤验证输⼊值(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验证提⽰下⾯是默认的验证提⽰,官⽹有简体中⽂版的验证提⽰下载,或者通过(es⾃定义错误提⽰信息,可以将⽹站的验证提⽰⽂本统⼀到⼀个⽂件⾥。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).",number: "Please enter a valid number.",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: $.("Please enter no more than {0} characters."),minlength: $.("Please enter at least {0} characters."),rangelength: $.("Please enter a value between {0} and {1} characters long."),range: $.("Please enter a value between {0} and {1}."),max: $.("Please enter a value less than or equal to {0}."),min: $.("Please enter a value greater than or equal to {0}.")使⽤⽅式1:在控件中使⽤默认验证规则,例⼦:电⼦邮件(必填)2:可以在控件中⾃定义验证规则,例⼦:⾃定义(必填,[3,5])3:通过javascript⾃定义验证规则,下⾯的JS⾃定义了两个规则,password和confirm_password$().ready(function() {$("#form2").validate({rules: {password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {password: {required: "没有填写密码",minlength: ("密码不能⼩于{0}个字符")},confirm_password: {required: "没有确认密码",minlength: "确认密码不能⼩于{0}个字符",equalTo: "两次输⼊密码不⼀致嘛"}}});});required除了设置为true/false之外,还可以使⽤表达式或者函数,⽐如$("#form2").validate({rules: {funcvalidate: {required: function() {return $("#password").val()!=""; }}},messages: {funcvalidate: {required: "有密码的情况下必填"}}});Html密码确认密码条件验证4:使⽤meta⾃定义验证信息⾸先⽤JS设置meta$("#form3").validate({ meta: "validate" });

Htmlemail5:使⽤meta可以将验证规则写在⾃定义的标签内,⽐如validateJS设置meta$().ready(function() {$.e("attr", "validate");$("#form1").validate();});HtmlEmail6:⾃定义验证规则对于复杂的验证,可以通过hod添加⾃定义的验证规则官⽹提供的⾥包含⼀些常⽤的验证⽅式,⽐如lettersonly,ziprange,nowhitespace等例⼦// 字符验证

hod("userName", function(value, element) {return al(element) || /^[u0391-uFFE5w]+$/.test(value);}, "⽤户名只能包括中⽂字、英⽂字母、数字和下划线");

//然后就可以使⽤这个规则了$("#form1").validate({// 验证规则rules: {userName: {required: true,userName: true,rangelength: [5,10]}},/* 设置错误信息 */messages: {userName: {required: "请填写⽤户名",rangelength: "⽤户名必须在5-10个字符之间"}

},});

7:radio、checkbox、select的验证⽅式类似radio的验证性别
checkbox的验证最少选择两项选项1
选项2
选项3
select的验证下拉框8:Ajax验证⽤remote可以进⾏Ajax验证remote: {url: "url", //url地址type: "post", //发送⽅式dataType: "json", //数据格式 data: { //要传递的数据username: function() {return $("#username").val();}}}Plugin methodsName Typevalidate( options ) Returns: Validator验证所选的FORMvalid( ) Returns: Boolean检查是否验证通过rules( ) Returns: Options返回元素的验证规则rules( "add", rules ) Returns: Options增加验证规则rules( "remove", rules ) Returns: Options删除验证规则removeAttrs( attributes ) Returns: Options删除特殊属性并且返回他们Custom selectorsName Type:blank Returns: Array 没有值的筛选器:filled Returns: Array 有值的筛选器:unchecked Returns: Array 没选择的元素的筛选器UtilitiesName ( template, argument , ) Returns: String⽤参数代替模板中的 {n}。Validatorvalidate⽅法返回⼀个Validator对象, 它有很多⽅法, 让你能使⽤引发校验程序或者改变form的内容.下⾯只是列出常⽤的.form( ) Returns: Boolean验证form返回成功还是失败element( element ) Returns: Boolean验证单个元素是成功还是失败resetForm( ) Returns: undefined把前⾯验证的FORM恢复到验证前原来的状态showErrors( errors ) Returns: undefined显⽰特定的错误信息built-in Validation methodsName TypesetDefaults( defaults ) Returns: undefined改变默认的设置addMethod( name, method, message ) Returns: undefined添加⼀个新的验证⽅法. 必须包括名字,⼀个JAVASCRIPT⽅法和⼀个默认的信息addClassRules( name, rules ) Returns: undefined增加组合验证类型addClassRules( rules ) Returns: undefined增加组合验证类型built-in Validation methodsName Typerequired( ) Returns: Boolean必填验证元素required( dependency-expression ) Returns: Boolean必填元素依赖于表达式的结果.required( dependency-callback ) Returns: Boolean必填元素依赖于回调函数的结果.remote( url ) Returns: Boolean请求远程校验。url通常是⼀个远程调⽤⽅法minlength( length ) Returns: Boolean设置最⼩长度maxlength( length ) Returns: Boolean设置最⼤长度rangelength( range ) Returns: Boolean设置⼀个长度范围[min,max]min( value ) Returns: Boolean设置最⼩值.max( value ) Returns: Boolean设置最⼤值.range( range ) Returns: Boolean设置值的范围email( ) Returns: Boolean验证电⼦邮箱格式url( ) Returns: Boolean验证连接格式date( ) Returns: Boolean验证⽇期格式(类似30/30/2008的格式,不验证⽇期准确性只验证格式)dateISO( ) Returns: Boolean研制ISO类型的⽇期格式dateDE( ) Returns: Boolean验证德式的⽇期格式(29.04.1994 or 1.1.2006)number( ) Returns: Boolean验证⼗进制数字(包括⼩数的)numberDE( ) Returns: BooleanMakes the element require a decimal number with german ( ) Returns: Boolean验证整数creditcard( ) Returns: Boolean验证信⽤卡号accept( extension ) Returns: Boolean验证相同后缀名的字符串equalTo( other ) Returns: Boolean验证两个输⼊框的内容是否相同⾃定义jquery-validate的验证⾏为1: ⾃定义表单提交设置submitHandler来⾃定义表单提交动作$(".selector").validate({submitHandler: function(form) { alert("验证通过"); }});如果需要提交表单,可以调⽤(); 或者$(form).ajaxSubmit();2: 调试模式将debug设置为true,表单不会提交,只进⾏检查,⽅便调试$(".selector").validate({debug: true})3: 设置validate的默认值使⽤setDefaults可以设置validate的默认值,⽐如默认所有表单验证都是在debug模式下进⾏$.aults({debug: true})4: 某些元素不验证设置ignore属性可以忽略某些元素不验证$(".selector").validate({ignore: "ignore"})5: 验证时机te可以很⽅便的设置在什么时候触发验证动作onsubmit: 提交时是否验证$(".selector").validate({onsubmit: false})onfocusout: 失去焦点时验证(checkboxes/radio除外)$(".selector").validate({onfocusout: false})onkeyup: 在keyup时验证$(".selector").validate({onkeyup: false})onclick: 在checkboxes、radio点击时验证.$(".selector").validate({onclick: false})6: 重写验证规则和验证提⽰信息//重写max的的验证提⽰信息$. = ("Your totals musn't exceed {0}!");//重写equal⽅法$. = function(value, element, param) {return value == param;};7: focusInvalid 是否把焦点聚焦在最后⼀个动作或者最近的⼀次出错上$(".selector").validate({focusInvalid: false})8: focusCleanup如果该属性设置为True, 那么控件获得焦点时,移除出错的class定义,隐藏错误信息,避免和 focusInvalid.⼀起⽤。$(".selector").validate({focusCleanup: true})9: meta设置meta来封装验证规则$(".selector").validate({meta: "validate",})⾃定义错误消息的显⽰⽅式默认情况下,验证提⽰信息⽤label元素来显⽰, 并且会添加css class, 通过css可以很⽅便设置出错控件以及错误信息的显⽰⽅式。/* 输⼊控件验证出错*/form { border:solid 1px red;}/* 验证错误提⽰信息*/form {width: 200px;margin-left: 10px; color: Red;}如果想⾃定义显⽰⽅式,可以修改te的默认显⽰⽅式默认⽤label显⽰错误消息,可以通过errorElement属性来修改errorElement: 错误消息的html标签$(".selector").validateerrorElement: "em"})可以在出错信息外⽤其他的元素包装⼀层。wrapper: 错误消息的外层封装html标签$(".selector").validate({wrapper: "li"})验证出错的css class默认是error,通过errorClass可以修改errorClass: 验证出错时使⽤的css class$(".selector").validate({errorClass: "invalid"})还⾃定义验证成功时的动作success: 如果值是字符串,会当做⼀个css类,如果是⼀个函数,则执⾏该函数$(".selector").validate({success: "valid"})或者success: function(label) {(" ").addClass("checked");}还可以把错误消息统⼀到⼀个容器显⽰errorLabelContainer: 将错误消息统⼀到⼀个容器显⽰$("#myform").validate({errorLabelContainer: "#messageBox"})默认情况下,错误消息是放在验证元素后⾯的,可以⾃定义错误消息的显⽰位置$(".selector").validate({errorPlacement: function(error, element) {To( ("td").next("td") );}})更进⼀步可以定义⼀个组,把⼏个地⽅的出错信息统⼀放在⼀个地⽅,⽤error Placement控制把出错信息放在哪⾥groups:定义⼀个组$(".selector").validate({groups: {username: "fname lname"},errorPlacement: function(error, element) {if (("name") == "fname" || ("name") == "lname" )After("#lastname");After(element);}})⾼亮显⽰highlight: ⾼亮显⽰,默认是添加errorClassunhighlight: 和highlight对应,反⾼亮显⽰$(".selector").validate({highlight: function(element, errorClass) {$(element).addClass(errorClass);$().find("label[for=" + + "]").addClass(errorClass);},unhighlight: function(element, errorClass) {$(element).removeClass(errorClass);$().find("label[for=" + + "]").removeClass(errorClass);}});或者可以完全⾃定义错误显⽰showErrors: 得到错误的显⽰句柄$(".selector").validate({showErrors: function(errorMap, errorList) {$("#summary").html("Your form contains " + OfInvalids()+ " errors, see details below.");tShowErrors();}})// ⼿机号码验证hod("mobile", function(value, element) {var length = ;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/return al(element) || (length == 11 && (value));}, "⼿机号码格式错误");

// 电话号码验证

hod("phone", function(value, element) {var tel = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/;return al(element) || ((value));}, "电话号码格式错误");// 邮政编码验证

hod("zipCode", function(value, element) {var tel = /^[0-9]{6}$/;return al(element) || ((value));}, "邮政编码格式错误");// QQ号码验证

hod("qq", function(value, element) {var tel = /^[1-9]d{4,9}$/;return al(element) || ((value));}, "qq号码格式错误");// IP地址验证hod("ip", function(value, element) {var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;return al(element) || ((value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));}, "Ip地址格式错误");// 字母和数字的验证hod("chrnum", function(value, element) {var chrnum = /^([a-zA-Z0-9]+)$/;return al(element) || ((value));}, "只能输⼊数字和字母(字符A-Z, a-z, 0-9)");// 中⽂的验证hod("chinese", function(value, element) {var chinese = /^[u4e00-u9fa5]+$/;return al(element) || ((value));}, "只能输⼊中⽂");// 下拉框验证$.hod("selectNone", function(value, element) {return value == "请选择";}, "必须选择⼀项");// 字节长度验证hod("byteRangeLength", function(value, element, param) {var length = ;for (var i = 0; i < ; i++) {if (deAt(i) > 127) {length++;}}return al(element) || (length >= param[0] && length <= param[1]);}, $.("请确保输⼊的值在{0}-{1}个字节之间(⼀个中⽂字算2个字节)"));