# 表单校验规则
开发者可以在表单字段配置上使用 rule 属性配置校验规则，可参考通用表单组件的 fields 字段配置的 rule 属性。
# 使用示例
你可以直接复制使用此处代码
// 下述示例演示了不同的规则配置方式
[{
…,
// Array 复合配置规则
rule: [
// String 单值配置规则
'required',
// Object 自定义配置规则
{ type: 'length', check: [6, 12] }
]
}, {
…,
// String 单值配置规则
rule: 'required'
}, {
…,
// Array 复合配置规则
rule: ['required']
}, {
…,
// Object 自定义配置规则
rule: { type: 'min', check: 3 }
}, {
…,
// Array 复合配置规则
rule: [{
type: '汉字',
message: '备注只能是汉字！'
}, {
type: 'length',
check: [10, 20],
message: '字数必须在 10 - 20 之间！'
}]
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 校验规则
# 单值配置规则
TIP
开发者仅通过为 rule 赋值一个关键字字符串即可开启预置的校验规则。
cosnt formFields = [{
…,
rule: 'required'
}]
1
2
3
4
2
3
4
| 名称 | 说明 |
|---|---|
| number | 数字 |
| integer | 整数 |
| digital | 浮点数 |
| digital_1 | 浮点数且有 1 位小数 |
| digital_2 | 浮点数且有 2 位小数 |
| digital_3 | 浮点数且有 3 位小数 |
| digital_4 | 浮点数且有 4 位小数 |
| 电子邮件地址 | |
| tel | 手机号 |
| ip | ip 地址 |
| id | 二代身份证号(18 位) |
| id15 | 一代身份证号(15 位) |
| idMix | 一代二代大陆身份证、港澳台身份证 |
| 汉字 | 中文字符、中文标点 |
| required | 必填 |
| 正则表达式 | 自定义正则表达式 |
# 复合配置规则
TIP
开发者通过为 rule 赋值 Object 类型配置，即可自定义校验规则；赋值 Array 类型配置则定义多个校验规则，可以同时包含预置规则和自定义规则。
const formFields = [{
…,
rule: {
type: 'max',
check: 20,
message: '最大值不能超过 20',
trigger: 'blur'
}
}, {
…,
rule: [
{
type: 'length',
check: 10,
message: '字符长度必须为 10',
trigger: 'blur'
},
// 其他规则
…
]
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| type | [String] 校验类型 详情参考check 配置 | 无 |
| check | [number|string|Array|boolean|function] 校验值 type 校验类型对应的校验值。 如果 type 值为 custom，则该值为自定义校验函数引用。 详情参考check 配置 | 无 |
| message | [string|function] 校验失败的提示语 | 基于规则的内置文本 |
| trigger | [String] 触发时机 input/change/blur/submit 参考校验触发时机 | blur |
# check 配置
| Type 取值 | 说明 | check 配置 |
|---|---|---|
| required | 必填 | [Boolean] true |
| min | 最小值 | [Number] 闭区间数字 |
| max | 最大值 | [Number] 闭区间数字 |
| regexp | 自定义正则表达式 | [String] 正则表达式 |
| length | 字符串长度 | [Number|Array] 设置单值表示输入长度应该等于设置值； 设置数组值表示输入长度应该介于 Array[0] 和 Array[1] 之间。 |
| 电子邮件地址 | 无 | |
| tel | 手机号 | 无 |
| number | 任意数字 | 无 |
| integer | 任意整数 | 无 |
| digital | 任意浮点数 | 无 |
| ip | IP 地址(IPV4) | 无 |
| id | 二代身份证号(18 位) | 无 |
| id15 | 一代身份证号(15 位) | 无 |
| tel | 电话号码 | 无 |
| 汉字 | 只能输入汉字和汉字标点符号 | 无 |
| custom | 自定义校验规则 | [Function] 自定义函数 函数携带待验值 函数应总是返回一个布尔值，表示校验通过或失败。 |
| remote | 远程校验 | [Function] 自定义函数 请阅读 远程校验 了解远程校验用法。 |
# Form Rules 校验触发时机
TIP
submit 为内驻校验点，所有校验规则（远程校验除外）都将在 submit (或执行 submitCheck 方法) 时被执行。
| 名称 | 说明 |
|---|---|
| input | 当文本域输入值时连续触发 |
| blur | 当文本域失去焦点时触发 |
| change | 当文本域值改动时触发 |
| submit | 当表单提交时或执行 submitCheck 时触发 |
# 远程校验
当校验需要由服务器完成时，比如校验一个值是否已存在于数据库中，开发者可以使用远程校验特性。
const formFields = [{
label: '表具编号',
field: 'meterNo',
value: '',
type: 'input',
rule: {
type: 'remote',
// 校验函数接受两个参数: value, setResult
check: (value, setResult) => {
// 此例中使用 setTimeout 模拟异步请求
setTimeout(() => {
if (value === '1234567') {
// 校验失败返回错误信息
setResult('表具编号已存在！')
} else {
// 校验通过返回 true
setResult(true)
}
})
},
trigger: 'change'
}
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23