async-validator 教程

npm 地址：

https://www.npmjs.com/package/async-validator

安装

npm i async-validator

用法

基础的用法是先定义一个 descriptor 对象。

import Schema from 'async-validator';

const descriptor = {
  name: {
    // 同步自定义验证函数。里面不能作异步校验。
    // 返回 true 代表校验成功，返回 false 代表失败
    // 使用自定义验证函数，其它规则都会失效。
    required: true, // 建议显示指定 required 的值。是否必须校验。
    validator: (rule, value) => {
      return value === 'xiaoming'
      // 不可以返回 Promise，否则永远验证通过
    }
    
  },
  age: {
    required: true, // 必传 age 属性。默认为 true
    type: 'number',
    min: 1,
    max: 10
  },
  gender: {
    // 异步自定义验证函数，返回 Promise
    // 如果被验证的对象没有 gender 属性，则不会走这个验证函数
    required: false,
    asyncValidator: (rule, value) => {
      return new Promise((resole, reject) => {
        setTimeout(() => {
          resole(value)
        }, 500);
      })
      // return true。
    }
  }
};

const validator = new Schema(descriptor);

// Promise 形式
validator.validate({ name: 'xiaoming' }, { 
    suppressWarning: false, // 当有非法值时，是否隐藏内部的警告 
    first: false, // 默认为 true。为 false 后，有一个验证失败后，后面就不再验证了 
    firstFields: false // 默认为 ture。为 false 后，当一个属性有多个校验规则时，有一个验证失败后，后面就不再验证了 
}).then((fields) => {
  // 验证通过
  console.log('验证成功', fields)
}).catch(({ errors, fields }) => {
  // 验证失败
  console.log('验证失败', fields)
});

执行这段代码会打印什么呢？

会打印验证失败。因为被验证对象只有 name 属性，而验证规则指定 required: true 的属性还有 age, 也就是说还必须传递 age 属性。

然后改一改

// Promise 形式
validator.validate({ name: 'xiaoming', age: 5 }).then((fields) => {
  // 验证通过
  console.log('验证成功', fields)
}).catch(({ errors, fields }) => {
  // 验证失败
  console.log('验证失败', fields)
});

此时打印验证成功。

还可以为其指定多个验证规则
```js
  age: [
    {
            required: true,
            type: 'number',
    },
    {
            type: 'number',
            required: true,
            min: 1,
            max: 100
    }
],

其中 type 的值可以为以下这些：

要注意string为默认值

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.
• any: Can be any type.