jquery 驗(yàn)證非常簡(jiǎn)單，下面總結(jié)常用的三種方式：
第一種方式：也是比較標(biāo)準(zhǔn)的方式：
首先引入jquery 插件和 jquery 驗(yàn)證插件：
第一步：引入插件
jquery驗(yàn)證，需要有：
1：定義驗(yàn)證方法
2：添加驗(yàn)證規(guī)則
下面貼出常用的驗(yàn)證小例子，一看就明白了。
先看效果圖：
<!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: "請(qǐng)輸入用戶(hù)名4--20個(gè)英文字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("請(qǐng)輸入{0}數(shù)字") } } }); 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("不能超過(guò){0}個(gè)字節(jié)(一個(gè)中文字算2個(gè)字節(jié))")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^/d*$/.test(value); } //,$.validator.format("請(qǐng)輸入數(shù)字{0}位以?xún)?nèi)") ); //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("請(qǐng)輸入合法數(shù)字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]/d{5}(?!/d)$/.test(value); },$.validator.format("請(qǐng)輸入合法的郵編") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("請(qǐng)輸入字母或數(shù)字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(/d{14}|/d{17})(/d|[xX])$/.test(value); },$.validator.format("請(qǐng)輸入合法身份證號(hào)") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("請(qǐng)輸入字母或者空格") ); });</script><body><form id="frm" name="frm" method="post" action=""><label>用 戶(hù) 名: <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>數(shù) 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份證號(hào)： <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> </p></form></body></html>這是一個(gè)完整的驗(yàn)證示例，關(guān)于引入的代碼已經(jīng)上傳，可以點(diǎn)擊下載
下面講解其中的重點(diǎn)方法：
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("不能超過(guò){0}個(gè)字節(jié)(一個(gè)中文字算2個(gè)字節(jié))"));jQuery.validator.addMethod() 方法，有三個(gè)參數(shù),
第一個(gè)參數(shù) ： “byteMaxLength” 是定義方法名，必須保證方法名唯一，是一個(gè)identifier標(biāo)志。
第二個(gè)參數(shù)： 是下面這個(gè)回調(diào)（callback）函數(shù)：
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); }回調(diào)函數(shù)有三個(gè)參數(shù)：
第一個(gè)：value ，是當(dāng)前驗(yàn)證的元素的值。
第二個(gè)： element 是當(dāng)前被驗(yàn)證的元素。
第三個(gè)：是傳入的參數(shù)，例如： min : 5 這個(gè)參數(shù)為5， 對(duì)于本方法調(diào)用的時(shí)候，例如：byteMaxLength：10 其中10為傳入?yún)?shù)。
這個(gè)方法的方法名為： byteMaxLength 回調(diào)函數(shù)如上，
回調(diào)函數(shù)的作用就是驗(yàn)證輸入的為多少個(gè)字節(jié)，其中一個(gè)漢字代表兩個(gè)字符，字符為0-127的ASCII碼，其中有一句返回：
return this.optional(element) 這個(gè)函數(shù)調(diào)用的意思是： 用于表單輸入值不為空時(shí)驗(yàn)證，當(dāng)field為空時(shí)，即element的值為空，this.optional(element) = true, 就是說(shuō)該filed不是必填項(xiàng)，當(dāng)不填時(shí)也通過(guò)驗(yàn)證， 如果element的值不為空 this.optional(element) = false 就要根據(jù) || 后面的驗(yàn)證來(lái)判斷返回為true 或false的目的，總結(jié)起來(lái) this.optional(element) 就是為了說(shuō)明 當(dāng)前驗(yàn)證的 field不是必填項(xiàng)。
第三個(gè)參數(shù)： 如下：
這第三個(gè)參數(shù)可以直接是一個(gè)message 就是驗(yàn)證的提示信息， 為了顯示函數(shù)的驗(yàn)證的信息，這個(gè)參數(shù)也可以通過(guò)創(chuàng)建函數(shù)jQuery.validator.format(value)來(lái)顯示，其中 {0} 代表 該方法 的參數(shù)如果 方法調(diào)用如: byteMaxLength : 10 上面的輸入就是 不能超過(guò)10個(gè)字節(jié)，（一個(gè)中文字算兩個(gè)字節(jié)）
下面看一下這段代碼：
$( "#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: "請(qǐng)輸入用戶(hù)名4--20個(gè)英文字符", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format("請(qǐng)輸入{0}數(shù)字") } } }); 首先這是一個(gè)方法調(diào)用
驗(yàn)證選擇的表單，方法的參數(shù)是可選項(xiàng)，可以輸入0個(gè)或者鍵值對(duì)（key/value）
這個(gè)方法是為了 處理例如：submit , focus , keyup , blur, click 觸發(fā)驗(yàn)證的，對(duì)象是整個(gè)表單的元素，或者是單個(gè)元素，使用rules和 messages 定義驗(yàn)證的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的錯(cuò)誤信息顯示。
下面看 validate 的方法 rules();
返回 第一個(gè)選擇的元素的驗(yàn)證的規(guī)則， 有若干種方式定義驗(yàn)證規(guī)則。
rules 方法定義了基于id的驗(yàn)證，
如上：其中，username為 id名， {}中為定義的驗(yàn)證方法，就是這個(gè)id 的都需要哪些方法驗(yàn)證，方法名就是上面講到的方法；
這樣就定義了。
messages中定義了 ：
這個(gè)id中方法驗(yàn)證錯(cuò)誤提示信息。其中可以直接輸出message或者調(diào)用 $.format()方法。
上面的標(biāo)準(zhǔn)格式就是：
第二種方式：和第一種基本差不多：
<!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("不能超過(guò){0}個(gè)字節(jié)(一個(gè)中文字算2個(gè)字節(jié))")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^/d*$/.test(value); },$.validator.format("請(qǐng)輸入數(shù)字{0}位以?xún)?nèi)") ); //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("請(qǐng)輸入合法數(shù)字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]/d{5}(?!/d)$/.test(value); },$.validator.format("請(qǐng)輸入合法的郵編") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("請(qǐng)輸入字母或數(shù)字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(/d{14}|/d{17})(/d|[xX])$/.test(value); },$.validator.format("請(qǐng)輸入合法身份證號(hào)") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("請(qǐng)輸入字母或者空格") ); $("#frm").validate(); check_infor();});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}"); }</script><body><form id="frm" name="frm" method="post" action=""><label>用 戶(hù) 名: <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>數(shù) 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份證號(hào)： <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> </p></form></body></html>以上為第二種方式的代碼：其中：
方法定義和第一種一樣：在于調(diào)用：
其中定義了一個(gè)javascript方法專(zhuān)門(mén)用于為form表單中需要驗(yàn)證的id進(jìn)行驗(yàn)證：
其中用到了.attr() 方法：這個(gè)方法有很多種參數(shù)形式 .attr(attributeName,value)方法
attributeName為參數(shù)名： value 為參數(shù)值
其中下面means 是為 id為username的 元素 的 class 屬性 添加值：
這樣該id元素就有了驗(yàn)證。
注意： 在自定義的check_infor()調(diào)用之前 ，必須首先調(diào)用$("#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("不能超過(guò){0}個(gè)字節(jié)(一個(gè)中文字算2個(gè)字節(jié))")); jQuery.validator.addMethod("numFormat",function(value,element,param){ return this.optional(element) || /^/d*$/.test(value); },$.validator.format("請(qǐng)輸入數(shù)字{0}位以?xún)?nèi)") ); //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("請(qǐng)輸入合法數(shù)字,精度格式123456.0") ); jQuery.validator.addMethod("postcodeVal",function(value,element){ return this.optional(element) || /^[0-9]/d{5}(?!/d)$/.test(value); },$.validator.format("請(qǐng)輸入合法的郵編") ); jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); },$.validator.format("請(qǐng)輸入字母或數(shù)字") ); jQuery.validator.addMethod("sfzhValidate",function(value,element){ return this.optional(element) || /^(/d{14}|/d{17})(/d|[xX])$/.test(value); },$.validator.format("請(qǐng)輸入合法身份證號(hào)") ); jQuery.validator.addMethod("valiEnglish",function(value,element){ return this.optional(element) || /^[a-zA-Z ]*$/.test(value); },$.validator.format("請(qǐng)輸入字母或者空格") ); $("#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>用 戶(hù) 名: <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>數(shù) 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份證號(hào)： <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> </p></form></body></html>
第三種方式與其他兩種方式不同的地方就是：
為每一個(gè)單獨(dú)的元素添加驗(yàn)證規(guī)則。其中調(diào)用了rules( "add", rules )方法：
增加驗(yàn)證規(guī)則為匹配的元素。
注意：$("form").validate()方法必須首先被調(diào)用。
這個(gè)規(guī)則也能包含一個(gè)messages-object，定義常用的messages。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
