中国免费图片素材网站山东今日头条新闻
async-validator 是一个基于 JavaScript 的表单验证库，支持异步验证规则和自定义验证规则
主流的 UI 组件库 Ant-design 和 Element 中的表单验证都是基于 async-validator
使用 async-validator 可以方便地 构建表单中逻辑，使得错误提示信息更加友好和灵活。
使用步骤
- 安装并在项目中导入 async-validator
- 创建验证规则
- 创建表单验证实例，将验证规则传递给构造函数，产生实例
- 调用实例方法 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 })}})})},})