微信小程序 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 })}})})},})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2、程序设计语言基础知识

这一章节的内容在我们的软件设计师考试当中,考的题型比较固定,基本都是选择题,分值大概在2~4分左右。 而且考的还多是程序设计语言的一些基本语法,特别是这两年比较火的Python。 所以对于有一定要编程基础的即使本章的内容不学习&…

独孤思维:即便副业卷,也能继续赚钱

01 前段时间独孤倒腾了一下午,终于整出了第一个关于独孤ip的短视频内容。 之所以搞这么久,独孤一直在调整封面,视频尺寸,内容抽帧,背景音乐和文案。 独孤是处女座。 所有的环节,都必须让自己看着舒服满…

AI学习记录 - 图像识别的基础入门

代码实现,图像识别入门其实非常简单,这里使用的是js,其实就是把二维数组进行公式化处理,处理方式如上图,不同的公式代表的不同的意义,这些意义网上其实非常多,这里就不细讲了。 const getSpecif…

JavaScript构造函数小挑战

// 编码挑战 #1 /* 使用构造函数实现一辆汽车。一辆汽车有一个品牌和一个速度属性。speed 属性是汽车当前的速度,单位为 km/h; a. 执行一个 “accelerate ”方法,将汽车的速度提高 10,并将新速度记录到控制台; 3. a.…

VSCode python autopep8 格式化 长度设置

ctrl, 打开设置 > 搜索autopep8 > 找到Autopep8:Args > 添加项--max-line-length150

等保测评练习卷17

等级保护初级测评师试题17 姓名: 成绩: 判断题(101=10分)1. 关于安全区域边界的安全审计,三级系统的要求包括应对审计进程进行保护,防止未经授权的中断。( F ) 是安全计算环境的安全审计 2.…

前端循环依赖

前端中循环依赖 什么是循环依赖: 两个以上模块之间互相引用,构成闭环依赖。 保持依赖引入的单向流通性! 示例: 不要觉得自己不会写出这样的代码,当项目庞大后一旦出现这样的问题将会造成无法排查的问题。 // 在a.js 引用 b.js …

秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II,合并两个有序链表}

文章目录 引言复习堆堆——前K个高频元素个人实现复习实现二参考实现 新作单词搜索个人实现参考实现 分割回文串个人实现参考实现 环形链表II个人实现参考实现 两个有序链表个人实现 总结 引言 又是充满挑战性的一天,继续完成我们的任务吧!继续往下刷&a…

WebRTC QoS方法十三.2(Jitter延时的计算)

一、背景介绍 一些报文在网络传输中,会存在丢包重传和延时的情况。渲染时需要进行适当缓存,等待丢失被重传的报文或者正在路上传输的报文。 jitter延时计算是确认需要缓存的时间 另外,在检测到帧有重传情况时,也可适当在渲染时…

【目标检测实验系列】EMA高效注意力机制,融合多尺度特征,助力YOLOv5检测模型涨点(文内附源码)

1. 文章主要内容 本篇博客主要涉及多尺度高效注意力机制,融合到YOLOv5s模型中,增加模型提取多尺度特征的能力,助力模型涨点。(通读本篇博客需要7分钟左右的时间)。 2. 简要概括 论文地址:EMA论文地址 如下…

Blender材质-PBR与纹理材质

1.PBR PBR:Physically Based Rendering 基于物理的渲染 BRDF:Bidirection Reflectance Distribution Function 双向散射分散函数 材质着色操作如下图: 2.纹理材质 左上角:编辑器类型中选择,着色器编辑器 新建着色器 -> 新建纹理 -> 新…

音视频入门基础:H.264专题(17)——FFmpeg源码获取H.264裸流文件信息(视频压缩编码格式、色彩格式、视频分辨率、帧率)的总流程

音视频入门基础:H.264专题系列文章: 音视频入门基础:H.264专题(1)——H.264官方文档下载 音视频入门基础:H.264专题(2)——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

U447601 星月的建筑游戏题解

题目链接 解题思路 solution1 动态规划题目,略微复杂。 状态非常好设计,设 f i f_i fi​表示使用前i个木棍可以获得的最大积分。 然后暴力枚举来选择建筑材料的区间 [ i 1 , j ] [i1,j] [i1,j],接着就在这个区间中枚举 a , b , c a,b,c a,b,c(其实…

【开源库编译 | zlib】 zlib库最新版本(zlib-1.3.1)在Ubuntu(Linux)系统下的 编译 、交叉编译(移植)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

《书生大模型实战营第3期》入门岛 学习笔记与作业:Git 基础知识

文章大纲 Git 是什么?-- 分布式版本控制系统版本控制系统简介Git 基本概念1. 安装 Git1.1 Windows 系统1.2 Linux 系统 2. Git 托管平台3. 常用 Git 操作4. tips4.1 全局设置 vs. 本地设置4.2 如何配置4.3 验证设置4.4 Git 四步曲 5. 常用插件6. 常规开发流程 作业其…

js+css侧边导航菜单 可收缩

jscss侧边导航菜单 可收缩https://www.bootstrapmb.com/item/14774 创建一个可收缩的侧边导航菜单需要使用JavaScript来处理交互&#xff0c;而CSS则用来设置样式和动画效果。以下是一个简单的示例&#xff0c;展示了如何创建一个可收缩的侧边导航菜单。 HTML 结构 html<!…

重修之路1

我也不知道我现在处于个什么状态&#xff0c;我在以前写代码时知道部分方法如何使用&#xff0c;但是也仅限于此我并不了其如何实现&#xff0c;让我感到迷茫我是越来越菜了随着AI的发展它写出的代码简洁高效甚至让我有些看不懂&#xff0c;以至于我开始怀疑自己的JS基本功因此…

开源模型应用落地-LangChain高阶-智能体探究-自定义agent(五)

一、前言 大模型具有非常强大的功能,可以解答疑问、撰写报告和文档、总结内容、进行翻译等各种日常工作任务。然而,大模型还可以应用于更多的场景,发挥出更强大的作用。 通过智能体,我们可以实现许多有价值的事情,比如:在日常生活中,我们能借助智能体实现智能家居的自动化…

Java中的异常处理与容错设计最佳实践

Java中的异常处理与容错设计最佳实践 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;异常处理是一个非常重要的环节。良好的异常处理和容错设计可以提升系统的健壮性和可维…

【接口测试】params传参与body传参区别

文章目录 一.params传参二.body传参三.两者区别说明 一.params传参 params传参一般用于get请求 params传参时,参数会附于URL后面以问号形式展示。 示例&#xff1a; http://ip地址:端口号/login?usernamexm&pwd111二.body传参 body传参一般用于post请求 body传参时需…