| 名稱 | 返回類型 | 描述 |
|---|---|---|
| validate(options) | Validator | 驗證所選的 FORM。 |
| valid() | Boolean | 檢查是否驗證通過。 |
| rules() | Options | 返回元素的驗證規則。 |
| rules("add",rules) | Options | 增加驗證規則。 |
| rules("remove",rules) | Options | 刪除驗證規則。 |
| removeAttrs(attributes) | Options | 刪除特殊屬性并且返回它們。 |
| 自定義選擇器 | ||
| :blank | Validator | 沒有值的篩選器。 |
| :filled | Array <Element> | 有值的篩選器。 |
| :unchecked | Array <Element> | 沒選擇的元素的篩選器。 |
| 實用工具 | ||
| jQuery.format(template,argument,argumentN...) | String | 用參數代替模板中的 {n}。 |
validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程序或者改變 form 的內容，下面列出幾個常用的方法。
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| form() | Boolean | 驗證 form 返回成功還是失敗。 |
| element(element) | Boolean | 驗證單個元素是成功還是失敗。 |
| resetForm() | undefined | 把前面驗證的 FORM 恢復到驗證前原來的狀態。 |
| showErrors(errors) | undefined | 顯示特定的錯誤信息。 |
| Validator 函數 | ||
| setDefaults(defaults) | undefined | 改變默認的設置。 |
| addMethod(name,method,message) | undefined | 添加一個新的驗證方法。必須包括一個獨一無二的名字，一個 javaSCRipT 的方法和一個默認的信息。 |
| addClassRules(name,rules) | undefined | 增加組合驗證類型，在一個類里面用多種驗證方法時比較有用。 |
| addClassRules(rules) | undefined | 增加組合驗證類型，在一個類里面用多種驗證方法時比較有用。這個是同時加多個驗證方法。 |
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| required() | Boolean | 必填驗證元素。 |
| required(dependency-exPRession) | Boolean | 必填元素依賴于表達式的結果。 |
| required(dependency-callback) | Boolean | 必填元素依賴于回調函數的結果。 |
| remote(url) | Boolean | 請求遠程校驗。url 通常是一個遠程調用方法。 |
| minlength(length) | Boolean | 設置最小長度。 |
| maxlength(length) | Boolean | 設置最大長度。 |
| rangelength(range) | Boolean | 設置一個長度范圍 [min,max]。 |
| min(value) | Boolean | 設置最小值。 |
| max(value) | Boolean | 設置最大值。 |
| email() | Boolean | 驗證電子郵箱格式。 |
| range(range) | Boolean | 設置值的范圍。 |
| url() | Boolean | 驗證 URL 格式。 |
| date() | Boolean | 驗證日期格式（類似 30/30/2008 的格式，不驗證日期準確性只驗證格式）。 |
| dateISO() | Boolean | 驗證 ISO 類型的日期格式。 |
| dateDE() | Boolean | 驗證德式的日期格式（29.04.1994 或 1.1.2006）。 |
| number() | Boolean | 驗證十進制數字（包括小數的）。 |
| digits() | Boolean | 驗證整數。 |
| creditcard() | Boolean | 驗證信用卡號。 |
| accept(extension) | Boolean | 驗證相同后綴名的字符串。 |
| equalTo(other) | Boolean | 驗證兩個輸入框的內容是否相同。 |
| phoneUS() | Boolean | 驗證美式的電話號碼。 |
| 描述 | 代碼 |
|---|---|
| debug：進行調試模式（表單不提交）。 | $(".selector").validate({debug:true}) |
| 把調試設置為默認。 | $.validator.setDefaults({debug:true}) |
| submitHandler：通過驗證后運行的函數，里面要加上表單提交的函數，否則表單不會提交。 | $(".selector").validate({submitHandler:function(form) {$(form).AjaxSubmit();}}) |
| ignore：對某些元素不進行驗證。 | $("#myform").validate({ignore:".ignore"}) |
| rules：自定義規則，key:value 的形式，key 是要驗證的元素，value 可以是字符串或對象。 | $(".selector").validate({rules:{name:"required",email:{required:true,email:true}}}) |
| messages：自定義的提示信息，key:value 的形式，key 是要驗證的元素，value 可以是字符串或函數。 | $(".selector").validate({rules:{name:"required",email:{required:true,email:true}},messages:{name:"Name不能為空",email:{ required:"E-mail不能為空",email:"E-mail地址不正確"}}}) |
| groups：對一組元素的驗證，用一個錯誤提示，用 errorPlacement 控制把出錯信息放在哪里。 | $("#myform").validate({groups:{username:"fname lname"},errorPlacement:function(error,element) {if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname");else error.insertAfter(element);}, debug:true}) |
| Onubmit：類型 Boolean，默認 true，指定是否提交時驗證。 | $(".selector").validate({ onsubmit:false}) |
| onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。 | $(".selector").validate({ onfocusout:false}) |
| onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。 | $(".selector").validate({ onkeyup:false}) |
| onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。 | $(".selector").validate({ onclick:false}) |
| focusInvalid：類型 Boolean，默認 true。提交表單后，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 | $(".selector").validate({ focusInvalid:false}) |
| focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。 | $(".selector").validate({ focusCleanup:true}) |
| errorClass：類型 String，默認 "error"。指定錯誤提示的 CSS 類名，可以自定義錯誤提示的樣式。 | $(".selector").validate({ errorClass:"invalid"}) |
| errorElement：類型 String，默認 "label"。指定使用什么標簽標記錯誤。 | $(".selector").validate errorElement:"em"}) |
| wrapper：類型 String，指定使用什么標簽再把上邊的 errorELement 包起來。 | $(".selector").validate({ wrapper:"li"}) |
| errorLabelContainer：類型 Selector，把錯誤信息統一放在一個容器里面。 | $("#myform").validate({ errorLabelContainer:"#messageBox",wrapper:"li",submitHandler:function() { alert("Submitted!") }}) |
| showErrors：跟一個函數，可以顯示總共有多少個未通過驗證的元素。 | $(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}}) |
| errorPlacement：跟一個函數，可以自定義錯誤放到哪里。 | $("#myform").validate({ rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true}) |
| success：要驗證的元素通過驗證后的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。 | $("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }}) |
| highlight：可以給未通過驗證的元素加效果、閃爍等。 |
參數 name 是添加的方法的名字。
參數 method 是一個函數，接收三個參數 (value,element,param) 。value 是元素的值，element 是元素本身，param 是參數。
我們可以用 addMethod 來添加除內置的 Validation 方法之外的驗證方法。比如有一個字段，只能輸一個字母，范圍是 a-f，寫法如下：
$.validator.addMethod("af",function(value,element,params){ if(value.length>1){return false;} if(value>=params[0] && value<=params[1]){return true;}else{return false;}},"必須是一個字母,且a-f");如果有個表單字段的 id="username"，則在 rules 中寫：
username:{ af:["a","f"]}addMethod 的第一個參數，是添加的驗證方法的名字，這時是 af。addMethod 的第三個參數，是自定義的錯誤提示，這里的提示為:"必須是一個字母,且a-f"。addMethod 的第二個參數，是一個函數，這個比較重要，決定了用這個驗證方法時的寫法。
如果只有一個參數，直接寫，比如 af:"a"，那么 a 就是這個唯一的參數，如果多個參數，則寫在 [] 里，用逗號分開。
meta String 方式$("#myform").validate({ meta:"validate", submitHandler:function() { alert("Submitted!") }})<script type="text/Javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><form id="myform"> <input type="text" name="email" class="{validate:{ required:true,email:true }}" /> <input type="submit" value="Submit" /></form>
新聞熱點
疑難解答
