微信小程序 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：需要验证地字段，属性值错误数据

示例

// 从 async-validator 中引入构造函数
import Schema from 'async-validator';
const app = getApp()
Page({
    data: {
        orderAddress: {},
        orderInfo: {}, // 订单详情
        show: false,
        currentDate: new Date().getTime(),
        minDate: new Date().getTime(),
        deliveryDate: "",
        buyName: '',
        buyPhone: '',
        blessing: '', 
    },
    // 处理提交订单
    async onSubmit() {
        // 需要从 data 中结构数据
        // 需要根据接口要求组织请求参数
        const { deliveryDate, buyName, buyPhone, blessing, orderAddress, orderInfo } = this.data
        // 需要根据接口要求组织请求参数
        const params = { 
        buyName,
         buyPhone, 
         deliveryDate, 
         cartList: orderInfo.cartVoList, 
         remarks: blessing,  
         userAddressId: orderAddress.id 
         }
        const { valid } = await this.validatorAddress(params)
        console.log(valid)// true/false

    },
    validatorAddress(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 = {
            userAddressId: { required: true, message: '请选择地址' },
            buyName: [
                { required: true, message: '请输入姓名' },
                { pattern: nameRegExp, message: '不合法' }
            ],
            buyPhone: [
                { required: true, message: '请输入手机号' },
                { pattern: phoneReg, message: '手机号不合法' }
            ],
            deliveryDate: { required: true, message: '请选择日期' },
        }
        // 传入验证规则进行实例化
        const validator = new Schema(rules)
        // 调用示例方法对请求参数进行验证
        // 注意：我们希望将验证通过 Promise 的形式返回给函数的调用者
        return new Promise((resolve) => {
            validator.validate(params, (errors) => {
                if (errors) {
                    // 如果验证失败，需要给用户进行提示
                    wx.toast({ title: errors[0].message })
                    // 如果属性值是 false，说明验证失败
                    resolve({ valid: false })
                } else {
                    // 如果属性值是 true，说明验证成功
                    resolve({ valid: true })
                }
            })
        })
    },
  


   
})