jQuery.validate 中文 API
名稱 |
返回類型 |
描述 |
---|---|---|
validate(options) |
Validator |
驗證所選的 FORM。 |
valid() |
Boolean |
檢查是否驗證通過。 |
rules() |
Options |
返回元素的驗證規則。 |
rules("add",rules) |
Options |
增加驗證規則。 |
rules("remove",rules) |
Options |
刪除驗證規則。 |
removeAttrs(attributes) |
Options |
刪除特殊屬性并且返回它們。 |
自定義選擇器 |
||
:blank |
Validator |
沒有值的篩選器。 |
:filled |
Array |
有值的篩選器。 |
:unchecked |
Array |
沒選擇的元素的篩選器。 |
實用工具 |
||
jQuery.format(template,argument,argumentN...) |
String |
用參數代替模板中的 {n}。 |
1、Validator
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 |
增加組合驗證類型,在一個類里面用多種驗證方法時比較有用。這個是同時加多個驗證方法。 |
2、內置驗證方式
名稱 |
BooleanBoolean返回類型 |
描述 |
---|---|---|
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 |
驗證美式的電話號碼。 |
3、validate ()的可選項
描述 |
代碼 |
---|---|
debug:進行調試模式(表單不提交)。 |
|
把調試設置為默認。 |
|
submitHandler:通過驗證后運行的函數,里面要加上表單提交的函數,否則表單不會提交。 |
|
ignore:對某些元素不進行驗證。 |
|
rules:自定義規則,key:value 的形式,key 是要驗證的元素,value 可以是字符串或對象。 |
|
messages:自定義的提示信息,key:value 的形式,key 是要驗證的元素,value 可以是字符串或函數。 |
|
groups:對一組元素的驗證,用一個錯誤提示,用 errorPlacement 控制把出錯信息放在哪里。 |
|
OnSubmit:類型 Boolean,默認 true,指定是否提交時驗證。 |
|
onfocusout:類型 Boolean,默認 true,指定是否在獲取焦點時驗證。 |
|
onkeyup:類型 Boolean,默認 true,指定是否在敲擊鍵盤時驗證。 |
|
onclick:類型 Boolean,默認 true,指定是否在鼠標點擊時驗證(一般驗證 checkbox、radiobox)。 |
|
focusInvalid:類型 Boolean,默認 true。提交表單后,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點。 |
|
focusCleanup:類型 Boolean,默認 false。當未通過驗證的元素獲得焦點時,移除錯誤提示(避免和 focusInvalid 一起使用)。 |
|
errorClass:類型 String,默認 "error"。指定錯誤提示的 css 類名,可以自定義錯誤提示的樣式。 |
|
errorElement:類型 String,默認 "label"。指定使用什么標簽標記錯誤。 |
|
wrapper:類型 String,指定使用什么標簽再把上邊的 errorELement 包起來。 |
|
errorLabelContainer:類型 Selector,把錯誤信息統一放在一個容器里面。 |
|
showErrors:跟一個函數,可以顯示總共有多少個未通過驗證的元素。 |
|
errorPlacement:跟一個函數,可以自定義錯誤放到哪里。 |
|
success:要驗證的元素通過驗證后的動作,如果跟一個字符串,會當作一個 css 類,也可跟一個函數。 |
|
highlight:可以給未通過驗證的元素加效果、閃爍等。 |
4、addMethod(name,method,message)方法
參數 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");
如果有個表單字段的 name="username",則在 rules 中寫:
username:{
af:["a","f"]
}
addMethod 的第一個參數,是添加的驗證方法的名字,這時是 af。
addMethod 的第三個參數,是自定義的錯誤提示,這里的提示為:"必須是一個字母,且a-f"。
addMethod 的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法。
如果只有一個參數,直接寫,比如 af:"a",那么 a 就是這個唯一的參數,如果多個參數,則寫在 [] 里,用逗號分開。
$("#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>
實例演示
• 錯誤消息容器
• 自定義消息作為元素數據
• radio(單選按鈕)、checkbox(復選按鈕)和 select(下拉框)
• 與表單(Form)插件的交互(AJAX 提交)
• 自定義方法和消息顯示
• 動態表單
• 使用 jQuery UI Themeroller 定義表單樣式
• TinyMCE - 一個輕量級的基于瀏覽器的所見即所得編輯器
• 文件輸入框
• jQuery Mobile 表單驗證
• Milk 注冊表單
• Marketo 注冊表單
• 房屋買賣折疊面板表單
• 遠程 CAPTCHA(驗證碼)驗證