async-validator

zxuanxuanz2023-09-24 11:46

一、概述

async-validator 是一个可以对数据进行异步校验的库，ant.design 与 Element ui 的 Form 组件都使用了 async-validator。

二、基础用法

async-validator 的功能是校验数据是否合法，并且根据校验规则给出提示信息。

javascript 复制代码

import AsyncValidator from 'async-validator'
// 校验规则
const descriptor = {
  username: [
    {
      required: true,
      message: '请填写用户名'
    },
    {
      min: 3,
      max: 10,
      message: '用户名长度为3-10'
    }
  ]
}
// 根据校验规则构造一个 validator
const validator = new AsyncValidator(descriptor)
const data = {
  username: 'username'
}
validator.validate(model, (errors, fields) => {
  console.log(errors)
})

三、自定义的校验函数

当 async-validator 中常见的校验规则无法满足需求时，我们可以编写自定义的校验函数来校验数据。

javascript 复制代码

function validateData (rule, value, callback) {
  let err
  if (value === 'xxxx') {
      err = '不符合规范'
  }
  callback(err)
}
const descriptor = {
  complex: [
      {
        validator: validateData
      }
  ]
}
const validator = new AsyncValidator(descriptor)

async-validator 支持对数据异步校验，所以在编写自定义校验函数时，不管校验是否通过，校验函数中的 callback 都要调用。