## 規則定義方式
### (1). 正則
適用于使用單個正則能搞定的驗證
~~~javascript
// 使用數組包裹正則和錯誤消息,規則不通過時提示該消息
mobile: [/^1[3458]\d{9}$/, '請檢查手機號格式']
// 或者,直接定義正則,需要另外定義錯誤消息,否則提示默認消息
mobile: /^1[3458]\d{9}$/
~~~
### (2). 函數
函數方式具有最大的靈活性,搞定任何驗證。不同返回值,導致不同驗證結果:
| 返回值 | 結果 | 描述 |
| --- | --- | --- |
| return undefined(無返回) | | 不影響驗證結果不提示消息(繼續驗證下一個規則) |
| return null | | 忽略本次驗證(跳過該字段的驗證,如果已經顯示了消息將會自動隱藏) |
| return true | √通過 | |
| return false | ×不通過 | |
| return "" | √通過 | |
| return "錯誤消息" | ×不通過 | 提示“錯誤消息” |
| return {"ok": "正確"} | √通過 | 提示“正確” |
| return {"error": "錯誤消息"} | ×不通過 | 提示“錯誤消息” |
| return $.ajax() | | ajax驗證,等待服務器返回驗證結果 |
例1:自定義規則,如果通過返回true,否則返回錯誤消息
~~~javascript
mobile: function(element, params) {
return /^1[3458]\d{9}$/.test(element.value) || '請檢查手機號格式';
}
~~~
例2:使用內置的`.test()`方法檢測是否符合某個規則
~~~javascript
loginName: function(element) {
return /^[a-zA-Z]\w{3,}/.test(element.value) ||
this.test(element, "mobile")===true ||
this.test(element, "email")===true ||
'請填寫用戶名、手機號或者郵箱';
}
~~~
例3:自定義 ajax 驗證
~~~javascript
// 你只需要將 $.ajax 返回,并且保證 response 符合上面的返回值說明,其他的插件都會自動處理。
// 當然,你也可以加上 success 回調做點別的,或者自己加上自定義 header
myRemote: function(element){
return $.ajax({
url: 'check/username.php',
type: 'post',
data: element.name +'='+ element.value,
dataType: 'json'
});
}
~~~
例4:無返回值,對驗證結果沒有影響
~~~javascript
passwordStrength: function() {
// 密碼強度驗證 和 UI處理
}
~~~
例5:動態跳過當前字段的驗證
~~~javascript
myRule: function() {
if (foo) {
return "Error Message"
}
// 跳過驗證(當前規則之后的所有規則都不被驗證)
else (bar) {
return null
}
}
~~~
## 規則作用范圍
### (1). 全局
使用`$.validator.config()`,建議配置在 local 配置文件(如:zh-CN.js)中
任何實例,任何字段都能訪問到該規則
~~~javascript
$.validator.config(
rules: {
mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"],
chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字符"]
}
);
~~~
### (2). 當前實例
在調用初始化驗證的時候傳參,只對調用時的實例有效
~~~javascript
$("#myForm").validator(
rules: {
mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"],
chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字符"]
}
);
~~~
### (3). 當前字段
只能通過 DOM 方式在表單元素上定義
~~~html
<input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數字']">
~~~