Async Validator

表单验证插件 jQuery Validation 一文中介绍过表单验证的库 jQuery Validation，这里简单的介绍另外一个表单验证的库 async-validator (iView 的表单验证也是使用了这个库)，了解基础使用后，请阅读官方文档深入学习。

添加依赖

yarn add async-validator

基本用法

// 1. 导入 async-validator
import Validator from 'async-validator';

// 要验证的数据对象
const org = {
    name: '',
};

// 2. 定义验证规则
const rules = {
    name: { type: 'string', required: true, whitespace: true, message: '机构名不能为空白字符' },
};

// 3. 使用验证规则创建验证器
const validator = new Validator(rules);

// 4. 调用 validate 方法验证数据
validator.validate(org).then(() => {
    // 验证通过
    console.log('success');
}).catch(({ errors, fields }) => {
    // 验证失败
    console.log(errors);
});

注意: require 为 true 时表示需要验证，为 false 表示不进行验证，required 默认值为 false。

嵌套验证

上面的示例中只验证了对象的直接简单属性 (机构名不能为空白字符)，如果 org 还有个对象类型的 admin 属性: admin: { username: '' }，同时要验证 admin.username 不为空白字符，则验证规则如下:

// 要验证的数据对象
const org = {
    name: '',
    admin: {
        username: ''
    }
};

// 2. 定义验证规则
const rules = {
    name: { type: 'string', required: true, whitespace: true, message: '机构名不能为空白字符' },
    admin: {
        type: 'object', required: true,
        fields: {
            username: { type: 'string', required: true, whitespace: true, message: '用户名不能为空白字符' }
        }
    }
};

常用验证

经常会使用的验证有名字、邮件地址、URL、数值的范围、手机号码、使用正则等，可参考下面的例子:

const user = {
    username: 'Bob',
    email   : 'bob@gmail',
    avatar  : '//www.a.com/img/avatar.png',
    age     : 111,
    mobile  : '1234567890',
};

// 2. 定义验证规则
// 名字不能为空，并且不能是空白字符串
const rules = {
    username: { type: 'string',  required: true, whitespace: true, message: '用户名不能为空白字符' },
    email   : { type: 'email',   required: true, message: '请填写正确的邮件格式' },
    avatar  : { type: 'url',     required: true, message: '头像的 URL 不对' },
    age     : { type: 'integer', required: true, min: 0, max: 100 },
    mobile  : { type: 'string',  required: true, pattern: /\d{11}/, message: '请输入正确的手机号码' },
};

异步验证

const user = {
    username: 'Bob',
};

// 2. 定义验证规则
// 名字不能为空，并且不能是空白字符串
const rules = {
    username: { type: 'string',  required: true, asyncValidator(rules, value, callback) {
        // 模拟 Ajax 异步请求，检查名字是否已经被使用
        setTimeout(() => {
            if (Date.now() % 2 === 0) {
                callback();
            } else {
                callback(`名字 ${value} 已经被使用`);
            }
        }, 1000);
    } },
};

提示: 请求结束调用 callback 函数时，无参数表明验证通过，有参数表明验证失败，参数可以是验证失败的原因描述。