本文主要介绍了使用 async-validator 编写 form 组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助大家。
前端开发中，表单的校验一个很常见的功能，一些 ui 库例如ant.design 与Element ui 都实现了有校验功能的 Form 组件。async-validator 是一个可以对数据进行异步校验的库，ant.design 与 Element ui 的 Form 组件都使用了 async-validator。本文就简单介绍一下 async-validator 的基本用法以及使用该库实现一个简单的有校验功能的 Form 组件。
1. async-validator 的基本用法
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)
})当数据不符合校验规则时，在 validator.validate 的回调函数中，就可以得到相应的错误信息。
当 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 都要调用。
2. 编写 Form 组件与 FormItem 组件
现在知道了 async-validator 的使用方法，如何将这个库跟要编写的 Form 组件结合起来呢。
实现思路
用一张图描述一下实现思路。
Form 组件
Form 组件应该是一个容器，里面包含不定数量的 FormItem 或者其他元素。可以使用 Vue 内置的slot 组件来代表 Form 里面的内容。
Form 组件还需要知道包含了多少个需要校验的 FormItem 组件。一般情况下，父子组件的通信 是通过在子组件上绑定事件实现的，但是这里使用 slot，无法监听到子组件的事件。这里可以在 Form 组件上通过$on 监听事件，FormItem 挂载或者销毁前触发 Form 组件的自定义事件即可。
按照这个思路，我们先编写 Form 组件。
FormItem 组件
FormItem 组件就简单很多，首先要向上找到包含它的 Form 组件。接下来就可以根据 formError 计算出对应的错误信息。
FormItem 在 mounted 与 beforeDestroy 钩子中还需要触发 Form 组件的一些自定义事件。
最后新建一个 index.js 导出编写好的组件。
import VForm from './Form.vue'
import FormItem from './FormItem.vue'
export {
VForm,
FormItem
}3. 使用方式
表单的校验函数是在 Form 组件中。通过$ref 可以访问到 Form 组件，调用 validate 函数，从而获取到相应的校验信息。
使用方法如下：
完整的代码点击这里。
4. 总结
本文简单介绍了一下 async-validator 的用法，并实现了一个有校验功能的 Form 组件。这里的实现的 Form 表单存在着很多的不足：(1) 仅仅是在提交表单时才去校验。(2) FormItem 组件也应该根据校验的结果调整 ui，给出相应的提示。所以，Form 组件更适合在交互较少的移动端使用。
大家可以根据这个实现思路，根据应用场景，编写定制化更高的 Form 组件。
相关推荐：
