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

jquery表单验证插件（）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码 代码如下:第⼆步： 定义表单的错误输出：

复制代码 代码如下:第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法

2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。先看效果图：


 

这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法： hod("byteMaxLength", function(value, element, param) { var length = ; for ( var i = 0; i < ; i++) { if (deAt(i) > 127) { length++; } } return al(element) || (length <= param); }, $.("不能超过{0}个字节(⼀个中⽂字算2个字节)"));hod() ⽅法，有三个参数,第⼀个参数 ： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。第⼆个参数： 是下⾯这个回调（callback）函数：function(value, element, param) { var length = ; for ( var i = 0; i < ; i++) { if (deAt(i) > 127) { length++; } } return al(element) || (length <= param); }回调函数有三个参数：第⼀个：value ，是当前验证的元素的值。第⼆个： element 是当前被验证的元素。第三个：是传⼊的参数，例如： min : 5 这个参数为5， 对于本⽅法调⽤的时候，例如：byteMaxLength：10 其中10为传⼊参数。这个⽅法的⽅法名为： byteMaxLength 回调函数如上，回调函数的作⽤就是验证输⼊的为多少个字节，其中⼀个汉字代表两个字符，字符为0-127的ASCII码，其中有⼀句返回：return al(element) 这个函数调⽤的意思是： ⽤于表单输⼊值不为空时验证，当field为空时，即element的值为空，al(element) = true, 就是说该filed不是必填项，当不填时也通过验证， 如果element的值不为空 al(element) = false 就要根据 || 后⾯的验证来判断返回为true 或false的⽬的，总结起来 al(element) 就是为了说明 当前验证的 field不是必填项。第三个参数： 如下：复制代码 代码如下:$.("不能超过{0}个字节(⼀个中⽂字算2个字节)")

这第三个参数可以直接是⼀个message 就是验证的提⽰信息， 为了显⽰函数的验证的信息，这个参数也可以通过创建函数(value)来显⽰，其中 {0} 代表 该⽅法 的参数如果 ⽅法调⽤如: byteMaxLength : 10 上⾯的输⼊就是 不能超过10个字节，（⼀个中⽂字算两个字节）下⾯看⼀下这段代码： $( "#frm" ).validate({ rules: { username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }, postcode: { postcodeVal:true }, number: { byteMaxLength:5, numFormat:5 }, identifier: { sfzhValidate:true

}

}, messages: { username: { required: "请输⼊⽤户名4--20个英⽂字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("请输⼊{0}数字") } } });

⾸先这是⼀个⽅法调⽤复制代码 代码如下:$( "#frm" ).validate([options]）

验证选择的表单，⽅法的参数是可选项，可以输⼊0个或者键值对（key/value）这个⽅法是为了 处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使⽤rules和 messages 定义验证的元素，使⽤errorClass, errorElement, wrapper, errorLabelContainer, errorContainer,showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制⾮法元素的错误信息显⽰。下⾯看 validate 的⽅法 rules();返回 第⼀个选择的元素的验证的规则， 有若⼲种⽅式定义验证规则。rules ⽅法定义了基于id的验证，复制代码 代码如下: username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }如上：其中，username为 id名， {}中为定义的验证⽅法，就是这个id 的都需要哪些⽅法验证，⽅法名就是上⾯讲到的⽅法；这样就定义了。messages中定义了 ：复制代码 代码如下: username: { required: "请输⼊⽤户名4--20个英⽂字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }这个id中⽅法验证错误提⽰信息。其中可以直接输出message或者调⽤ $.format()⽅法。上⾯的标准格式就是：复制代码 代码如下:var $params = {debug:false, rules:{}, messages:{}}; $("#frm").validate($params);rules{}中定义验证规则的⽅法。 messages{}定义错误输出。以上为第⼀种⽅式：第⼆种⽅式：和第⼀种基本差不多：


 

以上为第⼆种⽅式的代码：其中：⽅法定义和第⼀种⼀样：在于调⽤：复制代码 代码如下:function check_infor(){

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}"); $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");

$("#number").attr("class","{byteMaxLength:6,numFormat:6}"); $("#identifier").attr("class","{sfzhValidate:true}");

}其中定义了⼀个javascript⽅法专门⽤于为form表单中需要验证的id进⾏验证：其中⽤到了.attr() ⽅法：这个⽅法有很多种参数形式 .attr(attributeName,value)⽅法attributeName为参数名： value 为参数值其中下⾯means 是为 id为username的 元素 的 class 属性 添加值：复制代码 代码如下:"{byteMaxLength:22,valiEnglish:true}"

复制代码 代码如下:$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");

这样该id元素就有了验证。注意： 在⾃定义的check_infor()调⽤之前 ，必须⾸先调⽤$("#frm").valudate();⽅法；第三种⽅式：


 

第三种⽅式与其他两种⽅式不同的地⽅就是：复制代码 代码如下: $('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true}); $('#postcode').rules('add', { postcodeVal:true}); $('#number').rules('add', { byteMaxLength:5,numFormat:5}); $('#identifier').rules('add', { sfzhValidate:true});为每⼀个单独的元素添加验证规则。其中调⽤了rules( "add", rules )⽅法：增加验证规则为匹配的元素。注意：$("form").validate()⽅法必须⾸先被调⽤。这个规则也能包含⼀个messages-object，定义常⽤的messages。

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

jquery表单验证插件（）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码 代码如下:第⼆步： 定义表单的错误输出：

复制代码 代码如下:第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法

2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。先看效果图：


 

这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法： hod("byteMaxLength", function(value, element, param) { var length = ; for ( var i = 0; i < ; i++) { if (deAt(i) > 127) { length++; } } return al(element) || (length <= param); }, $.("不能超过{0}个字节(⼀个中⽂字算2个字节)"));hod() ⽅法，有三个参数,第⼀个参数 ： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。第⼆个参数： 是下⾯这个回调（callback）函数：function(value, element, param) { var length = ; for ( var i = 0; i < ; i++) { if (deAt(i) > 127) { length++; } } return al(element) || (length <= param); }回调函数有三个参数：第⼀个：value ，是当前验证的元素的值。第⼆个： element 是当前被验证的元素。第三个：是传⼊的参数，例如： min : 5 这个参数为5， 对于本⽅法调⽤的时候，例如：byteMaxLength：10 其中10为传⼊参数。这个⽅法的⽅法名为： byteMaxLength 回调函数如上，回调函数的作⽤就是验证输⼊的为多少个字节，其中⼀个汉字代表两个字符，字符为0-127的ASCII码，其中有⼀句返回：return al(element) 这个函数调⽤的意思是： ⽤于表单输⼊值不为空时验证，当field为空时，即element的值为空，al(element) = true, 就是说该filed不是必填项，当不填时也通过验证， 如果element的值不为空 al(element) = false 就要根据 || 后⾯的验证来判断返回为true 或false的⽬的，总结起来 al(element) 就是为了说明 当前验证的 field不是必填项。第三个参数： 如下：复制代码 代码如下:$.("不能超过{0}个字节(⼀个中⽂字算2个字节)")

这第三个参数可以直接是⼀个message 就是验证的提⽰信息， 为了显⽰函数的验证的信息，这个参数也可以通过创建函数(value)来显⽰，其中 {0} 代表 该⽅法 的参数如果 ⽅法调⽤如: byteMaxLength : 10 上⾯的输⼊就是 不能超过10个字节，（⼀个中⽂字算两个字节）下⾯看⼀下这段代码： $( "#frm" ).validate({ rules: { username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }, postcode: { postcodeVal:true }, number: { byteMaxLength:5, numFormat:5 }, identifier: { sfzhValidate:true

}

}, messages: { username: { required: "请输⼊⽤户名4--20个英⽂字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("请输⼊{0}数字") } } });

⾸先这是⼀个⽅法调⽤复制代码 代码如下:$( "#frm" ).validate([options]）

验证选择的表单，⽅法的参数是可选项，可以输⼊0个或者键值对（key/value）这个⽅法是为了 处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使⽤rules和 messages 定义验证的元素，使⽤errorClass, errorElement, wrapper, errorLabelContainer, errorContainer,showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制⾮法元素的错误信息显⽰。下⾯看 validate 的⽅法 rules();返回 第⼀个选择的元素的验证的规则， 有若⼲种⽅式定义验证规则。rules ⽅法定义了基于id的验证，复制代码 代码如下: username: { required: true, minlength: 4, maxlength: 20, byteMaxLength:20, valiEnglish:true }如上：其中，username为 id名， {}中为定义的验证⽅法，就是这个id 的都需要哪些⽅法验证，⽅法名就是上⾯讲到的⽅法；这样就定义了。messages中定义了 ：复制代码 代码如下: username: { required: "请输⼊⽤户名4--20个英⽂字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }这个id中⽅法验证错误提⽰信息。其中可以直接输出message或者调⽤ $.format()⽅法。上⾯的标准格式就是：复制代码 代码如下:var $params = {debug:false, rules:{}, messages:{}}; $("#frm").validate($params);rules{}中定义验证规则的⽅法。 messages{}定义错误输出。以上为第⼀种⽅式：第⼆种⽅式：和第⼀种基本差不多：


 

以上为第⼆种⽅式的代码：其中：⽅法定义和第⼀种⼀样：在于调⽤：复制代码 代码如下:function check_infor(){

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}"); $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");

$("#number").attr("class","{byteMaxLength:6,numFormat:6}"); $("#identifier").attr("class","{sfzhValidate:true}");

}其中定义了⼀个javascript⽅法专门⽤于为form表单中需要验证的id进⾏验证：其中⽤到了.attr() ⽅法：这个⽅法有很多种参数形式 .attr(attributeName,value)⽅法attributeName为参数名： value 为参数值其中下⾯means 是为 id为username的 元素 的 class 属性 添加值：复制代码 代码如下:"{byteMaxLength:22,valiEnglish:true}"

复制代码 代码如下:$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");

这样该id元素就有了验证。注意： 在⾃定义的check_infor()调⽤之前 ，必须⾸先调⽤$("#frm").valudate();⽅法；第三种⽅式：


 

第三种⽅式与其他两种⽅式不同的地⽅就是：复制代码 代码如下: $('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true}); $('#postcode').rules('add', { postcodeVal:true}); $('#number').rules('add', { byteMaxLength:5,numFormat:5}); $('#identifier').rules('add', { sfzhValidate:true});为每⼀个单独的元素添加验证规则。其中调⽤了rules( "add", rules )⽅法：增加验证规则为匹配的元素。注意：$("form").validate()⽅法必须⾸先被调⽤。这个规则也能包含⼀个messages-object，定义常⽤的messages。