您的位置:首页 > 科技 > 能源 > 微信小程序 async-validator 表单验证 第三方包

微信小程序 async-validator 表单验证 第三方包

2025/4/11 13:35:24 来源:https://blog.csdn.net/weixin_44166849/article/details/140641637  浏览:    关键词:微信小程序 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 })}})})},})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com