👷‍♂ 酷库 - 表单验证

SLYLXDYMJ

字数：485 字

时长：1 分钟

表单提交通常需要验证用户的输入是否合法，但是验证的时机、规则千变万化，
如何优雅的实现就成了一个难题。

async-validator

原生，无依赖。
element-ui、iview，form 组件都基于这个库。
非常强大的验证库，看名字就知道支持异步，推荐使用。

github

使用方法

// 1. 定义字段规则，生成验证器
let validator = new Schema({
  name: [
    { type: 'string', required: true, message: '姓名不能为空', whitespace: true },
    { min: 2, max: 4, message: '姓名为 2 ~ 4 位' },
    { message: '自定义同步验证器函数错误信息', validate : function (rule, value) { /* ... */ } },
    { message: '自定义异步验证器函数错误信息', asyncValidator: function (rule, value) { /* ... */ } },
  ]
})

// 2. 传入需要验证的对象进行验证，回调风格
validator.validate({ name: 'jason' }, (errors, fields) => {
  // errors => 是个数组，记录着错误字段，以及消息
  // fields => 是个对象，记录着错误字段，以及消息
  // errors 和 fields 都代表有错误，看有那种数据结构处理更方便了
});

// 2. 传入需要验证的对象进行验证，promise 风格
validator.validate({ name: 'jason' })
  .then(() => {})
  .catch(({ errors, fields }) => {
    // errors => 是个数组，记录着错误字段，以及消息
    // fields => 是个对象，记录着错误字段，以及消息
    // errors 和 fields 都代表有错误，看有那种数据结构处理更方便了
  });

注意

1. whitespace 的作用是，是否将仅包含空格的字符串视为错误的。
2. 一个字段可以包含多个验证（数组），这个好处是可以定义多个 message 来响应不同的错误。
3. 不支持 script 方式引入使用。。

vee-validate（vue）

理论上支持所有的 ui 库
支持异步验证（通过手动 setErrors 的方式）

github

使用方法

待下次使用后记录。