15.微信小程序之async-validator 基本使用

async-validator是一个基于 JavaScript 的表单验证库，支持异步验证规则和自定义验证规则

主流的 UI 组件库 Ant-design 和 Element中的表单验证都是基于 async-validator

使用 async-validator 可以方便地构建表单验证逻辑，使得错误提示信息更加友好和灵活。

使用步骤：

1. 安装并在项目中导入 async-validator

2. 创建验证规则

3. 创建表单验证实例，将验证规则传递给构造函数，产生实例

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

   • 第一个参数：需要验证的数据

   • 第二个参数：回调函数，回调函数有两个参数 errors, fields

     • errors：如果验证成功，返回 null，验证错误，返回数组

     • fields：需要验证的字段，属性值错误数组

具体操作：

1.安装 async-validator

npm i async-validator

2.开发者工具，点击构建 npm，对 async-validator 进行构建

3.在 js 文件中导入 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('验证通过')})}
})