async-validator使用

使用antdForm表单组件时,然后结合文档梳理一下规则使用的几种方式。

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
const Validator = require('async-validator');
const descriptor = {
name: {type: "string", required: true}
}
const validator = new Validator(descriptor);

validator.validate({name: "demo"}, (errors, fields) => {
if(errors) {
console.error(errors);
}
// success
});

基本流程就是,创建一个验证器,参数是需要验证的字段以及其对应的验证规则,然后调用validate开始验证。

规则形式

async-validator中定义的校验规则格式有些会有简写,但通过一系列内部判断转化之后,其规则格式基本可以统一为:

1
2
3
{
name: [{type: 'string', validator: function() {}, field: 'name'}]
}

必需字段包含type, validator两个字段。如果没有validator函数时,验证时会自动跳过。

1. 规则是方法

1
2
3
4
5
6
7
8
9
10
11
const descriptor = {
number: function custom() {} // 提供只一个validate方法
// 也可以是
// number: [function custom() {}]
// 或者
// number: {validator: function custom() {}}
}
const validator = new Validator(descriptor);

....

这个规则在验证是会被转化为:

1
2
3
{
number: [{type: 'string', validator: function custom() {}, field: 'number'}]
}

如果规则是方法时,在回调async-validator会注入5个参数 rule, value, callback, source, options:

  • rule: 当前验证使用的规则
  • value: 字段的值
  • callback: 验证完成时的回调函数,参数是null 或者 [] 或者 [new Error('not valid')]
  • source: 验证时的所有数据
  • options: 额外的验证选项,可以包含message来覆盖默认的错误信息

2. 规则是一个对象

1
2
3
4
5
6
7
const descriptor = {
user: {required: true} // user 字段必填
}
const validator = new Validator(descriptor);

....

在验证时会被转化成:

1
2
3
4
{
// validators.required 是内部已定义好的检验函数
user: [{type: 'string', required: true, validator: validators.required, field: 'user'}]
}

3. 规则是一个数组

1
2
3
4
5
6
7
const descriptor = {
email: [{required: true}, {type: 'email'}] // user 字段必填
}
const validator = new Validator(descriptor);

....

4. 规则包含嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const descriptor = {
address: {
type: 'object',
required: true,
fields: {
province: {
type: 'string',
required: true,
min: 4,
},
city: {
type: 'string',
message: 'custom message',
min: 5,
}
}
}
}
const validator = new Validator(descriptor);

扩展阅读

async-validator