jQuery Validate使用前的準(zhǔn)備，需要下載相應(yīng)js包括：1、jquery.validate.min.js。2、additional-methods.min.js。
當(dāng)然必不可少的js jQuery文件。
引入上面的js后開始使用，jv(jquery validate以下叫jv)有兩種用法，先看第一種：
第一種就是直接在控件上用class的方式直接用，如：class="email"，這種方法如果想驗(yàn)證長度，好像不起效果，也可能是沒研究出來。
jv的提示語默認(rèn)是英文的，我們可以用內(nèi)置方法把提示語換成我們想要的內(nèi)容。
注意：使用前必須指定要驗(yàn)證的form?？创a:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq控件驗(yàn)證</title> <script src="Script/jquery.min.js"></script> <script src="jqvaldate/jquery.validate.min.js"></script> <script src="jqvaldate/additional-methods.min.js"></script> <script> $(function () { $("#myform").validate({ }); $.extend($.validator.messages, { required: "必選字段", remote: "請修正該字段", email: "請輸入正確格式的電子郵件", url: "請輸入合法的網(wǎng)址", date: "請輸入合法的日期", dateISO: "請輸入合法的日期 (ISO).", number: "請輸入合法的數(shù)字", digits: "只能輸入整數(shù)", creditcard: "請輸入合法的信用卡號", equalTo: "請?jiān)俅屋斎胂嗤闹?, accept: "請輸入擁有合法后綴名的字符串", maxlength: $.validator.format("請輸入一個(gè)長度最多是 {0} 的字符串"), minlength: $.validator.format("請輸入一個(gè)長度最少是 {0} 的字符串"), rangelength: $.validator.format("請輸入一個(gè)長度介于 {0} 和 {1} 之間的字符串"), range: $.validator.format("請輸入一個(gè)介于 {0} 和 {1} 之間的值"), max: $.validator.format("請輸入一個(gè)最大為 {0} 的值"), min: $.validator.format("請輸入一個(gè)最小為 {0} 的值") }); }); </script></head><body> <form id="myform" method="post" action=""> <p> <label for="email">E-Mail：</label> <input id="email" calss="required email" /> </p> <p> <input class="submit" type="submit" value="立即注冊" /> </p> </form></body></html>
上面的代碼就是在calss中用內(nèi)置驗(yàn)證方法直接驗(yàn)證的方式。
來看一下第二種，在js中進(jìn)行驗(yàn)證：
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq控件驗(yàn)證</title> <script src="Script/jquery.min.js"></script> <script src="jqvaldate/jquery.validate.min.js"></script> <script src="jqvaldate/additional-methods.min.js"></script> <script> $(function () { $("#myform").validate({ focusInvalid: false,//驗(yàn)證無效時(shí)，是否有焦點(diǎn)響應(yīng)
//指定驗(yàn)證成功后進(jìn)行提交 submitHandler: function (form) { form.submit(); },
//要驗(yàn)證的控件 rules: { myname: { required: true }, email: { required: true, email: true }, jia: { required: true, byteRangeLength: [3, 6] } },
//提示語 messages: { myname: { required: "必填" }, email: { required: "必填", email: "E-Mail格式不正確" } } }); //添加自定義驗(yàn)證 jQuery.validator.addMethod( "byteRangeLength", 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[0] && length <= param[1]); }, $.validator.format("請確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))") );
//定義提示語 $.extend($.validator.messages, { required: "必選字段", remote: "請修正該字段", email: "請輸入正確格式的電子郵件", url: "請輸入合法的網(wǎng)址", date: "請輸入合法的日期", dateISO: "請輸入合法的日期 (ISO).", number: "請輸入合法的數(shù)字", digits: "只能輸入整數(shù)", creditcard: "請輸入合法的信用卡號", equalTo: "請?jiān)俅屋斎胂嗤闹?, accept: "請輸入擁有合法后綴名的字符串", maxlength: $.validator.format("請輸入一個(gè)長度最多是 {0} 的字符串"), minlength: $.validator.format("請輸入一個(gè)長度最少是 {0} 的字符串"), rangelength: $.validator.format("請輸入一個(gè)長度介于 {0} 和 {1} 之間的字符串"), range: $.validator.format("請輸入一個(gè)介于 {0} 和 {1} 之間的值"), max: $.validator.format("請輸入一個(gè)最大為 {0} 的值"), min: $.validator.format("請輸入一個(gè)最小為 {0} 的值") }); }); </script></head><body> <form id="myform" method="post" action=""> <p> <label for="myname">用戶名：</label> <input id="myname" name="myname" /> </p> <p> <label for="email">E-Mail：</label> <input id="email" name="email" /> <input type="text" name="jia"/> </p> <p> <input class="submit" type="submit" value="立即注冊" /> </p> </form></body></html>以上代碼就是在js中進(jìn)行驗(yàn)證。
添加自定義驗(yàn)證的時(shí)候的三個(gè)參數(shù)分別為：驗(yàn)證名，要執(zhí)行的函數(shù)(要執(zhí)行的函數(shù)也有三個(gè)參數(shù)：val,element,param),要返回的值(可以格式化)。
簡單的自定義驗(yàn)證添加：
$.validator.addMethod( "lths", function (val, element, pms) { if (val.length > pms.length ) { return true; } else { return false; } } , $.validator.format("必須大于{0}個(gè)字節(jié)"));//在rules中調(diào)用的時(shí)候lths[6]以下是通過驗(yàn)證和未通過驗(yàn)證的操作：
//沒有通過驗(yàn)證的操作 highlight: function (element, errorClass) { $(element).CSS("border-color", "red"); },//通過驗(yàn)證的操作 unhighlight: function (element, errorClass) { $(element).css("border-color", ""); }
新聞熱點(diǎn)
疑難解答
