jquery-validator中js校驗及標簽校驗的使用：
1.項目中引入jquery.validate.js 官方網站:http://bassistance.de/ http://jqueryvalidation.org/
2.js校驗方式（自定義規則校驗，擴展校驗）：
js有默認的校驗規則如：required、email、number等，下面是自定義新的校驗規則：
//證件號碼 jQuery.validator.addMethod("number", function(value, element){ return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value); }, ""); //number表示新增方法的方法名 //郵編 jQuery.validator.addMethod("Postcode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, ""); //登錄密碼 jQuery.validator.addMethod("password", function(value, element){ return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value); }, ""); //理顧工號 jQuery.validator.addMethod("jobnumber", function(value, element){ return this.optional(element) ||/^[H][0-9]+$/.test(value); }, ""); //手機號碼 jQuery.validator.addMethod("basicnum", function(value, element){ return this.optional(element) ||regMobile.test(value); }, ""); //表單序列化 $("#formId").validate({ ignore: "hidden",//驗證屬性為hidden的元素 submitHandler: function() { //驗證通過后 的js代碼寫在這里 }, rules: { number: { //密碼2的描述多於1項使用對象類型 number: true //使用自定義的驗證規則,在上例中新增的部分 }, Postcode:{ //標簽的name值 Postcode:true //方法名 }, password:{ password:true }, jobnumber:{ jobnumber:true }, basicnum:{ basicnum:true } }, messages: { number: { number: "證件號碼只能是數字、字母" }, Postcode: { Postcode: "請正確填寫您的郵政編碼" }, password: { password: "密碼只能是數字、字母" }, jobnumber: { jobnumber: "只能是H+6位數字的格式,例如'H002200'" }, basicnum: { basicnum: "請輸入正確的手機號" } } })
3.標簽校驗及js校驗(兩種校驗方式)：
一、默認驗證規則
| required:true | 必須填寫 |
| remote:”check.php” | 使用ajax方法調用check.php驗證輸入值(check.php返回true或false字符串) |
| email:true | 必須輸入有效的電子郵件 |
| url:true | 必須輸入有效的網址 |
| date:true | 必須入有效的日期 |
| dateISO:true | 必須入有效的日期 (YYYY-MM-DD)，例如：2014-06-25，1998/06/09 只驗證格式，不驗證有效性 |
| number:true | 必須輸入正確的數字(負數，小數) |
| digits:true | 只可輸入數字 |
| creditcard:true | 必須輸入有效的信用卡號碼 |
| equalTo:”#field” | 必須輸入和#field相同的值 |
| extension | 必須輸入有效的后綴 |
| maxlength:10 | 輸入長度最多 10 個字符串(漢字算一個字符) |
| minlength:5 | 輸入長度最少 5 個字符串(漢字算一個字符) |
| rangelength:[5,10] | 輸入長度為必須介於 5 至 10 之間的字符串(漢字算一個字符) |
| range:[5,10] | 輸入數值必須介於 5 至 10 之間 |
| max:10 | 輸入數值不能大於 10 |
| min:5 | 輸入數值不能小於 5 |
二、默認的提示
messages: { 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.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ) },
可以使用中文的提示，引入messages_zh.js（在src/localization目錄中）
覺得麻煩,一次要引入兩個js,可以拿中文的提示覆蓋jquery.validate.js中的英文提示(反正我會這么干，畢竟多數情況都中文的)，如下：
messages: { required: "必須填寫", remote: "請修正此欄位", email: "請輸入有效的電子郵件", url: "請輸入有效的網址", date: "請輸入有效的日期", dateISO: "請輸入有效的日期 (YYYY-MM-DD)", number: "請輸入正確的數字", digits: "只可輸入數字", creditcard: "請輸入有效的信用卡號碼", equalTo: "你的輸入不相同", extension: "請輸入有效的后綴", maxlength: $.validator.format("最多 {0} 個字"), minlength: $.validator.format("最少 {0} 個字"), rangelength: $.validator.format("請輸入長度為 {0} 至 {1} 之間的字串"), range: $.validator.format("請輸入 {0} 至 {1} 之間的數值"), max: $.validator.format("請輸入不大於 {0} 的數值"), min: $.validator.format("請輸入不小於 {0} 的數值") },
三、使用方式（兩種）
1.將校驗規則寫到控件中
看了之前的別人寫的文章，貌似是依賴jquery.metadata.js這個庫，然后寫的時候以 class=”required email” 這樣的形式來寫，這樣寫起來好像有些亂，class本身是呈現樣式的，現在被附上各種校驗的規則，看上去似乎有些亂，不過好在新版本中，又有了新的寫法，不依賴上面的js庫，以 data-rule-驗證規則、data-msg-提示信息 這樣的格式來重新定義，更簡單，更直觀，更強大了。
<script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate(); }); </script> <form id="registerForm" method="get" action=""> <fieldset> <p> <label for="cusername">用戶名</label> <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用戶名不能為空" data-msg-rangelength="用戶名長度必須是2到10個字符"> </p> <p> <label for="cpassword">密碼</label> <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密碼不能為空" data-msg-minlength="至少設置6位密碼"> </p> <p> <label for="cconfirmpassword">確認密碼</label> <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="兩次密碼不一致"> </p> <p> <label for="cemail">郵箱</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="郵箱不能為空" data-msg-email="郵箱的格式不正確"> </input> </p> <p> <label for="chasreferee">有推薦人請勾選</label> <input type="checkbox" id="chasreferee" name="hasreferee"> </p> <p> <label for="creferee">推薦人</label> <input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推薦人不能為空"> </input> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form>
2.將校驗規則寫到代碼中
個人感覺第一種寫法，更適合做軟件開發或是網站后台，而第二種寫法更適合做網站的前台，對頁面加載速度有苛刻的要求的時候，可以把腳本代碼封裝成一個單獨的js，以提高網頁的加載速度。
<script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate({ rules: { username: { required: true, rangelength: [2, 20] }, password: { required: true, minlength: 6 }, confirmpassword: { equalTo: "#cpassword" }, email: { required: true, email: true }, referee: { required: "#chasreferee:checked" } }, messages: { username: { required: "用戶名不能為空", rangelength: "用戶名長度必須是2到10個字符" }, password: { required: "密碼不能為空", minlength: "至少設置6位密碼" }, confirmpassword: { equalTo: "兩次密碼不一致" }, email: { required: "郵箱不能為空", email: "郵箱的格式不正確" }, referee: { required: "推薦人不能為空" } } }); }); </script> <form id="registerForm" method="get" action=""> <fieldset> <p> <label for="cusername">用戶名</label> <input id="cusername" name="username" type="text"> </p> <p> <label for="cpassword">密碼</label> <input id="cpassword" name="password" type="password"> </p> <p> <label for="cconfirmpassword">確認密碼</label> <input id="cconfirmpassword" name="confirmpassword" type="password"> </p> <p> <label for="cemail">郵箱</label> <input id="cemail" name="email"> </input> </p> <p> <label for="chasreferee">有推薦人請勾選</label> <input type="checkbox" id="chasreferee" name="hasreferee"> </p> <p> <label for="creferee">推薦人</label> <input id="creferee" name="referee"> </input> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form>
四、常用方法及注意事項
1.用其他方式替代默認的SUBMIT（此種方法可以解決編輯內容時，所有內容驗證通過表單不提交的問題）
$("#registerForm").validate({
submitHandler:function(form){
form.submit();
}
});
也可以設置validate的默認值
$.validator.setDefaults({ submitHandler: function (form) { form.submit(); } });
2.debug，如果這個參數為true，那么表單不會提交，只進行檢查，調試時十分方便
$("#registerForm").validate({
debug:true
});
或者
$.validator.setDefaults({ debug: true })
3.ignore：忽略某些元素不驗證（默認情況是忽略:hidden及隱藏的元素不進行驗證）
$.validator.setDefaults({ ignore: ".ignore" })
4.errorPlacement：指定錯誤信息存放的位置
有一組復選框或單選框的情況，將錯誤信息的位置，存放在一組元素最后，如下：
$("#registerForm").validate({
errorPlacement: function (error, element) { //指定錯誤信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //獲取元素的name屬性
error.appendTo(element.parent()); //將錯誤信息添加當前元素的父結點后面
} else {
error.insertAfter(element);
}
}
});
原文：jquery.validate使用說明及注意事項:http://www.shouce123.com/archives/180.html