深圳网a深圳网站建设,明星粉丝网站怎么做,个人网站开发与设计摘要,wordpress整合ueditorasync-validator 是一个基于 JavaScript 的表单验证库#xff0c;支持异步验证规则和自定义验证规则 主流的 UI 组件库 Ant-design 和 Element 中的表单验证都是基于 async-validator 使用 async-validator 可以方便地 构建表单中逻辑#xff0c;使得错误提示信息更加友好和灵… async-validator 是一个基于 JavaScript 的表单验证库支持异步验证规则和自定义验证规则 主流的 UI 组件库 Ant-design 和 Element 中的表单验证都是基于 async-validator 使用 async-validator 可以方便地 构建表单中逻辑使得错误提示信息更加友好和灵活。 使用步骤 安装并在项目中导入 async-validator创建验证规则创建表单验证实例将验证规则传递给构造函数产生实例调用实例方法 validate 对数据进行验证 第一个参数需要验证地数据 第二个参数回调函数回调函数有两个参数 errorsfields 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 })}})})},})
