內置規則 · nice-validator

[TOC] ## required - 必填 > 適用于 input、textarea、select 輸入框。（checkbox 與 radio 請使用[checked](https://validator.niceue.com/docs/core-rules.html#section-2)規則） > 字段必填，則值不能為空。字段非必填，則值為空的時候直接驗證通過 > nice-validator 擴展了選擇器`:filled`，選擇填寫了的字段 | 規則 | 描述 | 示例 | | --- | --- | --- | | `required` | 字段必填 | required | | `required(ruleName)` | 滿足規則 ruleName 則字段必填 | required(isCompany) | | `required(jqSelector)` | 滿足 jqSelector 則字段必填 (`v0.8.0+`) | required(#id:filled)、required(#id:checked)、required(#id:enabled) | | `required(from, class, count)` | 在一組字段中至少填寫一個或多個 (`v0.8.0+`) | required(from, .contact) | | `required(not, value)` | 字段必填，但是排除值為 value 的情況 | required(not, -1) | **示例**：字段必填 ~~~html <input type="text" name="username" data-rule="required"> <select name="gender" data-rule="required"> <option value="">select ...</option> <option value="1">Male</option> <option value="2">Female</option> <option value="3">Other</option> </select> <textarea name="content" data-rule="required"></textarea> ~~~ **示例**：只有在 A 字段填寫過后，B 字段才必填 ~~~javascript $('#form1').validator({ fields: { A: 'required', B: 'required(#A:filled)' } }); ~~~ **示例**：如果滿足 jQuery 選擇器 "#isCompany:checked"，則字段必填 ~~~javascript $('#form1').validator({ fields: { companyName: 'required(#isCompany:checked)' } }); ~~~ **示例**：如果滿足規則 "isCompany"，則字段必填 ~~~html <form id="form1"> <input type="checkbox" name="isCompany" id="isCompany"> <input type="text" name="companyName"> </form> ~~~ ~~~javascript $('#form1').validator({ rules: { isCompany: function() { return $('#isCompany').prop('checked'); } }, fields: { companyName: 'required(isCompany)' } }); ~~~ **示例**：className 為 contact 的字段至少填寫一個 ~~~html <input class="contact" name="mobile" placeholder="手機號" data-rule="required(from, .contact); mobile" data-msg-required="請至少填寫一種聯系方式"> <input class="contact" name="tel" placeholder="電話" data-rule="required(from, .contact); tel"> <input class="contact" name="email" placeholder="郵箱" data-rule="required(from, .contact); email"> ~~~ ## checked - 必選 > 注意：checkbox 和 radio 類型的輸入框請使用 checked 規則（而不是 required） | 規則 | 描述 | | --- | --- | | `checked` | 必選 | | `checked(n)` | 必選 n 項 | | `checked(n~)` | 至少選擇 n 項 | | `checked(~n)` | 最多選擇 n 項 | | `checked(n1~n2)` | 選擇 n1 到 n2 項 | **示例**：至少選擇一項 ~~~html <label><input type="radio" name="gender" value="1" data-rule="checked">男</label> <label><input type="radio" name="gender" value="2">女</label> <label><input type="radio" name="gender" value="0">保密</label> ~~~ ## match - 兩個字段匹配和比較 > match 可以用于比較兩個字段值是否相同，或是否不同，或大小關系，也可以用于比較日期或者時間 | 規則 | 描述 | | --- | --- | | `match(name)` | 當前字段值必須和 name 字段的值匹配 | | `match(eq, name)` | 同上 | | `match(neq, name)` | 當前字段值必須和 name 字段值不同 | | `match(lt, name)` | 當前字段值必須小于 name 字段值 | | `match(gt, name)` | 當前字段值必須大于 name 字段值 | | `match(lte, name)` | 當前字段值必須小于等于 name 字段值 | | `match(gte, name)` | 當前字段值必須大于等于 name 字段值 | | `match(gte, name, date)` | 當前日期值必須大于等于 name 字段日期值 | | `match(gte, name, datetime)` | 當前時間值必須大于等于 name 字段時間值 | **示例**：確認密碼要與密碼一致 ~~~html <label>密碼：</label> <input name="pwd" data-rule="密碼: required;password;"> <label>確認密碼：</label> <input name="confirmPwd" data-rule="確認密碼: match(pwd);"> ~~~ **示例**：結束日期必須大于開始日期 ~~~html <label>開始日期：</label> <input name="startDate" data-rule="開始日期: required;date;"> <label>結束日期：</label> <input name="endDate" data-rule="結束日期: required;date;match(gt, startDate, date)"> ~~~ ## remote - 遠程驗證 > 服務端驗證并返回結果，URL 為必傳參數，默認 POST 請求 | 規則 | 描述 | | --- | --- | | `remote(URL)` | 請求服務端驗證 | | `remote(get:URL)` | 使用 GET 方式請求服務端驗證 | | `remote(URL, name1, #id2 ...)` | 傳遞額外動態參數 | | `remote(URL, foo=value1&bar=value2, name3 ...)` | 傳遞額外固定參數 (`v0.8.0+`) | | `remote(URL, foo:name1, bar:#id2, name3 ...)` | 代理參數名稱（實際服務器接收的參數為 foo 和 bar） | | `remote(jsonpURL)` | 跨域地址自動采用 JSONP 請求方式 | | `remote(\[cors: | jsonp:\]\[get: | post:\]URL)` | 強制 CORS 請求或者 JSONP 請求，強制 GET 或者 POST 請求 (`v0.10.8+`) | **示例**：跨域請求 ~~~javascript // 強制 jsonp 請求 "remote(jsonp:/user/checkName)" // 強制 CORS, 請求類型為 POST （0.10.8+） "remote(cors:post:/user/checkName)" ~~~ ### 服務端返回結果格式 1. 直接返回字符串結果 ~~~javascript // 為空代表通過 "" // 不為空則代表錯誤 "名字已被占用" ~~~ 2. 返回[JSON](https://zh.wikipedia.org/wiki/JSON)格式 ~~~javascript // 驗證通過 {"ok": "名字很棒"} // 驗證不通過 {"error": "名字已被占用"} // 結果在第二級 data {"status": 200, "data": {"error": "名字已被占用"}} ~~~ ### 前端轉換服務端返回的結果格式 **示例**：如果服務端返回格式無法更改，可以用[dataFilter](https://validator.niceue.com/docs/options.html#section-1-18)參數轉換 ~~~javascript /* 假設服務端返回結果為： {"status":600, "msg":"名字已被占用"} */ $('#form1').validator({ dataFilter: function(data) { if (data.status === 200) return ""; else return data.msg; }, fields: { name: "required; length(4~12); remote(/user/check/name)" } }); ~~~ ## integer - 整數 > 整數或者整數范圍 | 規則 | 描述 | | --- | --- | | `integer` | 整數 | | `integer(+)` | 正整數 | | `integer(+0)` | 正整數和零 | | `integer(-)` | 負整數 | | `integer(-0)` | 負整數和零 | ## range - 數值范圍 > 注意：只驗證范圍，不驗證是整數或者浮點數 | 規則 | 描述 | | --- | --- | | `range(n~)` | 請填寫不小于 n 的數 | | `range(~n)` | 請填寫不大于 n 的數 | | `range(n1~n2)` | 請填寫 n1 到 n2 的數 | | `range(n1~n2, false)` | 請填寫 n1 到 n2 的數（不包含邊界值）(`v0.9.0+`) | **示例**：輸入 0 ~ 100 的整數 ~~~html <input name="score" data-rule="required; integer[+0]; range[~100]"> ~~~ ## length - 字符長度 > 如果傳第二個參數 “true”，則全角字符（漢子）計算為兩個字符 | 規則 | 描述 | | --- | --- | | `length(n)` | 請填寫 n 個字符 | | `length(n~)` | 請至少填寫 n 個字符 | | `length(~n)` | 請最多填寫 n 個字符 | | `length(n1~n2)` | 請填寫 n1 到 n2 個字符 | | `length(n~, true)` | 請至少填寫 n 個字符（全角字符計算雙字符） | **示例**： ~~~html  <input type="password" name="pwd" data-rule="required;length(6~16)">  <textarea name="content" data-rule="length(~140)"></textarea> ~~~ ## filter - 過濾字符 > 注意：只過濾字符，不驗證 | 規則 | 描述 | | --- | --- | | `filter` | 過濾 <>`"' 和字符實體編碼的字符 | | `filter(RegExp)` | 自定義過濾正則 | **示例**： ~~~javascript // 過濾非數字字符 "filter(\D)" // 過濾非中文 "filter(^\u0391-\uFFE5)" ~~~ ## ~validate - 執行驗證另一個字段~ > `v0.8.0+`&`1.0-` > 注意：用于在當前字段驗證的時候觸發其他字段驗證，對當前字段不起作用 **示例**：字段 B 驗證通過后，觸發驗證字段 A ~~~html <input type="text" name="A" data-rule="required;"> <input type="text" name="B" data-rule="required; validate(A)"> ~~~