Rumah > Artikel > hujung hadapan web > 3 cara untuk menggunakan pemalam pengesahan borang jquery (jquery.validate.js)_jquery
pengesahan jquery adalah sangat mudah. Berikut ialah ringkasan tiga kaedah yang biasa digunakan:
Kaedah pertama: juga kaedah yang agak standard:
Mula-mula perkenalkan pemalam jquery dan pemalam pengesahan jquery:
Langkah 1: Perkenalkan pemalam
1: Tentukan kaedah pengesahan
2: Tambahkan peraturan pengesahan
Lihat pemaparan dahulu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/messages_zh.js"></script> <style type="text/css"> #frm label.error { color: Red; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World"); }); $( "#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}数字") } } }); jQuery.validator.addMethod("byteMaxLength", 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); }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^\d*$/.test(value); } //,$.validator.format("请输入数字{0}位以内") ); //number(9,3) jQuery.validator.addMethod("numFormat63",function(value,element){ return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value); },$.validator.format("请输入合法数字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value); },$.validator.format("请输入合法的邮编") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("请输入字母或数字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value); },$.validator.format("请输入合法身份证号") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("请输入字母或者空格") ); }); </script> <body> <form id="frm" name="frm" method="post" action=""><label>用 户 名: <input type="text" name="username" id="username" /> </label> <p> <label>邮 编 :<label></label></label> <label> <input type="text" name="postcode" id="postcode" /> <br /> </label> </p> <p><label>数 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份证号: <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> </p> </form> </body> </html>
klik untuk memuat turun.
Kaedah utama diterangkan di bawah:
jQuery.validator.addMethod("byteMaxLength", 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); }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
Parameter pertama: "byteMaxLength" adalah untuk mentakrifkan nama kaedah Nama kaedah mestilah unik dan merupakan bendera pengecam.
Parameter kedua: ialah fungsi panggil balik berikut:
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); }
Yang pertama: nilai, ialah nilai elemen yang sedang disahkan.
Yang kedua: elemen ialah elemen yang sedang disahkan.
Yang ketiga: ialah parameter masuk, contohnya: min: 5 Parameter ini ialah 5. Apabila kaedah ini dipanggil, contohnya: byteMaxLength: 10 di mana 10 ialah parameter masuk.
Fungsi fungsi panggil balik adalah untuk mengesahkan bilangan bait yang dimasukkan Satu aksara Cina mewakili dua aksara, dan aksara ialah kod ASCII 0-127. Salah satu ayat yang dikembalikan:
return this.optional(element) Maksud panggilan fungsi ini ialah: digunakan untuk mengesahkan apabila nilai input borang tidak kosong Apabila medan kosong, iaitu nilai elemen kosong, this.optional(elemen) = benar, yang bermaksud bahawa yang difailkan bukan item yang diperlukan, dan ia akan lulus pengesahan walaupun ia tidak diisi. Jika nilai elemen tidak kosong, this.optional(element) = false, tujuan mengembalikan benar atau false akan dinilai berdasarkan pengesahan di belakang ||. Kesimpulannya, .optional(elemen) ini adalah untuk menggambarkan bahawa medan yang disahkan tidak diperlukan.
Lihat kod ini di bawah:
$( "#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}数字") } } });
验证选择的表单,方法的参数是可选项,可以输入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为 id名, {}中为定义的验证方法,就是这个id 的都需要哪些方法验证,方法名就是上面讲到的方法;
这样就定义了。
messages中定义了 :
这个id中方法验证错误提示信息。其中可以直接输出message或者调用 $.format()方法。
上面的标准格式就是:
第二种方式:和第一种基本差不多:
以上为第二种方式的代码:其中:
方法定义和第一种一样:在于调用:
其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证:
其中用到了.attr() 方法:这个方法有很多种参数形式 .attr(attributeName,value)方法
attributeName为参数名: value 为参数值
其中下面means 是为 id为username的 元素 的 class 属性 添加值:
这样该id元素就有了验证。
注意: 在自定义的check_infor()调用之前 ,必须首先调用$("#frm").valudate();方法;
第三种方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/messages_zh.js"></script> <style type="text/css"> #frm label.error { color: Red; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World"); }); jQuery.validator.addMethod("byteMaxLength", 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); }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^\d*$/.test(value); },$.validator.format("请输入数字{0}位以内") ); //number(9,3) jQuery.validator.addMethod("numFormat63",function(value,element){ return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value); },$.validator.format("请输入合法数字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value); },$.validator.format("请输入合法的邮编") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("请输入字母或数字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value); },$.validator.format("请输入合法身份证号") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("请输入字母或者空格") ); $("#frm").validate(); $('#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}); }); </script> <body> <form id="frm" name="frm" method="post" action=""><label>用 户 名: <input type="text" name="username" id="username" /> </label> <p> <label>邮 编 :<label></label></label> <label> <input type="text" name="postcode" id="postcode" /> <br /> </label> </p> <p><label>数 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份证号: <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> </p> </form> </body> </html>
第三种方式与其他两种方式不同的地方就是:
为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法:
增加验证规则为匹配的元素。
注意:$("form").validate()方法必须首先被调用。
这个规则也能包含一个messages-object,定义常用的messages。