[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
<!-- 密码为 6 到 16 位 -->
<input type="password" name="pwd" data-rule="required;length(6~16)">
<!-- 内容不超过 140 个字符 -->
<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)">
~~~