vue | async-validator 表单验证库 第三方库安装与使用

省流总结：async-validator，

安装 npm install async-validator --save

使用:import Schema from 'async-validator';

const validator = new Schema ({ modelName: 规则 });

validator**.validate**({ modelName: 要验证的数据 }).then (验证通过的处理).catch (验证失败的处理)

验证- Promise 写法：当validator.validate中的name（key） 与 descriptor中的name（key）相同 时，就可以使用规则去验证 对应的值。.then 即验证通过 ，.catch 即验证失败 其中有两个错误信息 ++errors++ ++输出所有的错误信息++ ++fields++ ++提示具体哪些字段出现了问题++

---

github地址 ：yiminghe/async-validator: validate form asynchronous

安装：npm install async-validator --save

使用：

1.引入Schema

2.创建 Schema 实例

3.验证：实例调用validate方法验证（两种验证方式：① 回调，② Promise）

注：descriptor ，name为key 可以任意取名，name 里的 rules 即 定义好的预设类型规则。

---

验证方法- Promise的写法 ：当 validator.validate中的name(即 key) 与 descriptor中的 name（即 key）相同 时，就可以使用规则 去 验证对应的值。

.then()，即验证通过

.catch()，即验证失败。其中，有两个错误信息errors 输出所有的错误信息，fields 提示具体哪些字段出现了问题。

---

官网给的参考代码（两种验证方法：回调/Promise）：

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    },
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // validation failed, errors is an array of all errors
    // fields is an object keyed by field name with an array of
    // errors per field
    return handleErrors(errors, fields);
  }
  // validation passed
});

// PROMISE USAGE
validator.validate({ name: 'muji', age: 16 }).then(() => {
  // validation passed or without error message
}).catch(({ errors, fields }) => {
  return handleErrors(errors, fields);
});

应用 例子：

innerValue 为 model 数据，itemRules为规则，

实例化一个Schema， [modelName]:规则，调用 validate 验证规则。

当validator.validate中的name（key``） 与 ``descriptor中的name（key``）相同 时，就可以使用规则去验证 对应的值。.then 即验证通过 ，.catch 即验证失败 其中有两个错误信息 ++errors++ ++输出所有的错误信息++ ++fields++ ++提示具体哪些字段出现了问题++

RuleItem 规则类型 ，点击进去 可以查看所有的规则选项：

ValidateError、ValidateFieldsError：指明 错误信息的类型

类型 ：如 email，可以验证是否为正确的email格式。