Async-Validator——表单验证的艺术

在现代 web 应用开发中，表单验证是一个不可或缺的部分。它确保了用户输入的数据符合预期的格式和规则，从而提高了数据的质量和用户体验。async-validator 是一个强大的 JavaScript 库，它专门用于异步表单验证，被广泛应用于主流 UI 组件库如 Ant Design 和 Element 中。本文将介绍如何使用 async-validator 来实现表单验证，并提供一个实际的案例分析。

什么是 async-validator？

async-validator 是一个基于 JavaScript 的表单验证库，它支持异步验证规则和自定义验证规则。这意味着你可以在验证过程中执行异步操作，比如从服务器检查用户名是否已存在。

为什么选择 async-validator？

异步支持：能够在验证过程中执行异步操作。
自定义验证规则：支持创建自定义验证规则，满足特定的验证需求。
主流 UI 组件库支持：Ant Design 和 Element 等 UI 组件库的表单验证都是基于 async-validator。

如何使用 async-validator？

使用步骤：

安装并在项目中导入 async-validator
创建验证规则 rules
创建表单验证实例，将验证规则传递给构造函数，产生实例
调用实例方法 validate 对数据进行验证
- 第一个参数：需要验证的数据
- 第二个参数：回调函数，回调函数有两个参数 errors, fields
  - errors：如果验证成功，返回 null，验证错误，返回数组
  - fields：需要验证的字段，属性值错误数组

安装

首先，你需要安装 async-validator：

npm i async-validator

创建验证规则

创建一个包含验证规则的对象，每个字段的规则可以是一个对象，也可以是包含多个规则的对象数组。

创建表单验证实例

使用 async-validator 创建一个验证实例，将定义好的规则对象传递给它。

调用实例方法 validate 对数据进行验证

validate 方法接受两个参数：需要验证的数据和一个回调函数。回调函数有两个参数：errors 和 fields。errors 是一个数组，包含所有验证错误；fields 是一个对象，包含每个字段的验证错误数组。

实例代码

以下是使用 async-validator 的示例代码：

// 1️⃣ 引入 async-validator，async-validator 提供了一个构造函数
import Schema from 'async-validator'Page({// 2️⃣定义需要验证的数据data: {name: '你好'},// 验证数据onValidate() {// 3️⃣创建表单验证规则const rules = {// key 建议和 需要验证的数据字段名字保持一致name: [// required 是否是必填项{ required: true, message: 'name 不能为空' },// type 数据的类型// message 如果验证失败，提示的错误内容{ type: 'string', message: 'name 不是字符串' },// min 最少位数，max 最大位数{ min: 2, max: 5, message: '名字最少 2 个字，最多 5 个字' }// 正则表达式// { pattern: '', message: '' }// 自定义验证规则// { validator: () => {} }]}// 4️⃣创建表单验证实例// 在创建实例时需要传入验证规则const validator = new Schema(rules)// 5️⃣ 调用 validate 实例方法对数据进行验证// validate 方法接收一个对象作为参数，对象是需要验证的数据// 注意：validate 方法只会验证和验证规则同名的属性validator.validate(this.data, (errors, fields) => {// 如果验证失败，errors 是所有错误的数组// 如果验证成功，errors 是 nullconsole.log(errors)// fields 是需要验证的属性，属性值是数组，数组中包含错误信息console.log(fields)if (errors) {console.log('验证没有通过')console.log(errors)return}console.log('验证通过')})}
})

新增收货地址表单验证

在点击新增收货地址的时候，我们需要对用户输入的值进行验证。以下是具体的实现步骤和代码：

验证需求

收货人不能为空，且不能输入特殊字符。
手机号不能为空，且输入的手机号必须合法。
省市区不能为空。
详细地址不能为空。

正则表达式

const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$';
const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$';

实现代码

import Schema from 'async-validator'Page({// coding....// 保存收货地址async saveAddrssForm() {// 组织参数 (完整地址、是否设置为默认地址)const {provinceName,cityName,districtName,address,isDefault} = this.data// 最终需要发送的请求参数const params = {...this.data,fullAddress: provinceName + cityName + districtName + address,isDefault: isDefault ? 1 : 0}// 调用方法对最终的请求参数进行验证const { valid } = await this.validateAddress(params)// 如果验证没有通过，不继续执行后续的逻辑if (!valid) returnconsole.log(params)},// 验证新增收货地址请求参数// 形参 params 是需要验证的数据validateAddress(params) {// 验证收货人，是否只包含大小写字母、数字和中文字符const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'// 验证手机号const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'// 创建验证规则，验证规则是一个对象// 每一项是一个验证规则，验证规则属性需要和验证的数据进行同名const rules = {name: [{ required: true, message: '请输入收货人姓名' },{ pattern: nameRegExp, message: '收货人姓名不合法' }],phone: [{ required: true, message: '请输入收货人手机号' },{ pattern: phoneReg, message: '手机号不合法' }],provinceName: { required: true, message: '请选择收货人所在地区' },address: { required: true, message: '请输入详细地址' }}// 创建验证实例，并传入验证规则const validator = new Schema(rules)// 调用实例方法对数据进行验证// 注意：我们希望将验证结果通过 Promsie 的形式返回给函数的调用者return new Promise((resolve) => {validator.validate(params, (errors, fields) => {if (errors) {// 如果验证失败，需要给用户进行提示wx.toast({title: errors[0].message})resolve({ valid: false })} else {resolve({ valid: true })}})})},// coding...
})