async-validator

最新推荐文章于 2025-06-14 14:41:19 发布

原创最新推荐文章于 2025-06-14 14:41:19 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了异步验证库async-validator在前端开发中的基础用法，如如何设置校验规则和使用内置校验，以及如何编写自定义校验函数以满足复杂需求，特别关注ant.design和ElementuiForm组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

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

二、基础用法

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

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 中常见的校验规则无法满足需求时，我们可以编写自定义的校验函数来校验数据。

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 都要调用。