当前位置: 首页 > news >正文

15.微信小程序之async-validator 基本使用

async-validator是一个基于 JavaScript 的表单验证库,支持异步验证规则和自定义验证规则

主流的 UI 组件库 Ant-designElement中的表单验证都是基于 async-validator

使用 async-validator 可以方便地构建表单验证逻辑,使得错误提示信息更加友好和灵活。

使用步骤:

  1. 安装并在项目中导入 async-validator

  2. 创建验证规则

  3. 创建表单验证实例,将验证规则传递给构造函数,产生实例

  4. 调用实例方法 validate 对数据进行验证

    • 第一个参数:需要验证的数据

    • 第二个参数:回调函数,回调函数有两个参数 errors, fields

      • errors:如果验证成功,返回 null,验证错误,返回数组

      • fields:需要验证的字段,属性值错误数组


具体操作:

1.安装 async-validator

npm i async-validator

2.开发者工具,点击构建 npm,对 async-validator 进行构建

3.在 js 文件中导入 async-validator

// 1️⃣ 引入 async-validator,async-validator 提供了一个构造函数
import Schema from 'async-validator'Page({// 2️⃣定义需要验证的数据data: {name: '你好'},// 验证数据onValidate() {// 3️⃣创建表单验证规则const rules = {// key 建议和 需要验证的数据字段名字保持一致name: [// required 是否是必填项{ required: true, message: 'name 不能为空' },// type 数据的类型// message 如果验证失败,提示的错误内容{ type: 'string', message: 'name 不是字符串' },// min 最少位数,max 最大位数{ min: 2, max: 5, message: '名字最少 2 个字,最多 5 个字' }// 正则表达式// { pattern: '', message: '' }// 自定义验证规则// { validator: () => {} }]}// 4️⃣创建表单验证实例// 在创建实例时需要传入验证规则const validator = new Schema(rules)// 5️⃣ 调用 validate 实例方法对数据进行验证// validate 方法接收一个对象作为参数,对象是需要验证的数据// 注意:validate 方法只会验证和验证规则同名的属性validator.validate(this.data, (errors, fields) => {// 如果验证失败,errors 是所有错误的数组// 如果验证成功,errors 是 nullconsole.log(errors)// fields 是需要验证的属性,属性值是数组,数组中包含错误信息console.log(fields)if (errors) {console.log('验证没有通过')console.log(errors)return}console.log('验证通过')})}
})

相关文章:

15.微信小程序之async-validator 基本使用

async-validator是一个基于 JavaScript 的表单验证库,支持异步验证规则和自定义验证规则 主流的 UI 组件库 Ant-design 和 Element中的表单验证都是基于 async-validator 使用 async-validator 可以方便地构建表单验证逻辑,使得错误提示信息更加友好和…...

元宇宙vr科普馆场景制作引领行业潮流

在这个数字化高速发展的时代,北京3D元宇宙场景在线制作以其独特的优势,成为了行业内的创新引领者。它能够快速完成空间设计,根据您的个性化需求,轻松设置布局、灯光、音效以及互动元素等,为您打造出一个更加真实、丰富…...

kotlin基础之高阶函数

Kotlin中的高阶函数、内联函数以及noinline和crossinline关键字是函数式编程中的重要概念。下面我将逐一解释这些概念的定义、实现原理、使用场景以及noinline和crossinline关键字的具体用法。 高阶函数 定义:高阶函数是接受一个或多个函数作为参数,或…...

【Python音视频技术】用moviepy实现图文成片功能

今天上班的时候看到有人群里问 图文成片怎么实现。 临时给我提供一点写作的灵感,趁着下班写一篇。这里用到 python的moviepy库, 之前文章介绍过。 大体思路:假定有4张图片,每张图片将在视频中展示2秒钟,并且图片会按照…...

【Linux】权限的理解之权限掩码(umask)

目录 前言 一、利用八进制数值表示文件或目录的权限属性 二、系统默认的权限掩码和权限掩码的作用原理 三、分析权限掩码改变文件或目录的权限属性 前言 权限掩码是由4个数字组合而成的,默认的第一位数字是0;后三位数字分别由八进制位数字组成。权限…...

UVa1466/LA4849 String Phone

UVa1466/LA4849 String Phone 题目链接题意分析AC 代码 题目链接 本题是2010年icpc亚洲区域赛大田赛区的G题 题意 平面网格上有n(n≤3000)个单元格,各代表一个重要的建筑物。为了保证建筑物的安全,警察署给每个建筑物派了一名警察…...

使用Word表格数据快速创建图表

实例需求:Word的表格如下所示,标题行有合并单元格。 现在需要根据上述表格数据,在Word中创建如下柱图。如果数据在Excel之中,那么创建这个图并不复杂,但是Word中就没用那么简单了,虽然Word中可以插入图表&a…...

JAVA面试题大全(十三)

1、Mybatis 中 #{}和 ${}的区别是什么? 在 MyBatis 中,#{} 和 ${} 是两种用于参数绑定的方式,它们之间的主要区别在于数据处理的方式和 SQL 注入的风险。 #{}:预编译处理 #{} 用于预编译处理,MyBatis 会为其生成 Prep…...

搜维尔科技:第九届元宇宙数字人设计大赛入围作品名单

随着第九届元宇宙数字人设计大赛渐近尾声,各院校提交的数字人作品已陆续完成评分统计汇总工作!现将入围名单公布,请入围团队尽可能到场参加大赛颁奖典礼,具体获奖名次将在颁奖典礼中现场公布! 颁奖典礼时间、地点&…...

SMB工具横向移动

一. SMB工具介绍和使用 1.介绍 2013年的Defcon上,就引入了smbexec,后续 smbexec 被 Impacket 进一步完善了。在Impacket中支持明文认证,NTLM认证,Aeskey认证等方式! 2. 使用方法 命令: smbexec.exe 用户…...

cesuim

new Cesium.Color(255,255,0,1), //颜色 Math.PI/2color: Cesium.Color.fromCssColorString("#f40"), //16进制颜色初始化地球 import * as Cesium from "cesium";import { onMounted } from "vue"; onMounted(() > {Cesium.Ion.defaultAcc…...

2023、2024国赛web复现wp

2023 Unzip 类型&#xff1a;任意文件上传漏洞 主要知识点&#xff1a;软链接 随便上传一个一句话木马文件&#xff0c;得到一串php代码 根据代码上传zip文件发现进入后还是此页面 代码审计&#xff1a; <?php error_reporting(0); highlight_file(__FILE__);$finfo fin…...

day34 贪心算法 455.分发饼干 376. 摆动序列

贪心算法理论基础 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 贪心一般解题步骤&#xff08;贪心无套路&#xff09;&#xff1a; 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问题的最优解将局部最优解堆叠成全局最优解 455.分发饼干 …...

养老院管理系统基于springboot的养老院管理系统java项目

文章目录 养老院管理系统一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 养老院管理系统 一、项目演示 养老院管理系统 二、项目介绍 基于springboot的养老院管理系统 角色&#xff1a;超级…...

跳台阶扩展问题

题目链接 f(1) 1f(2) 1 1 2f(3) 1 2 1 4f(4) 1 2 4 1 8 所以 f(n) 2 n − 1 ^{n-1} n−1 import java.util.Scanner;public class Solution {public int jumpFloorII(int target) {return 1 << (target - 1);} }...

超清高帧,成像升级 | SWIR短波红外相机500万像素992芯片

博图光电5MP短波红外相机&#xff0c;搭载了索尼IMX992 SenSWIR传感器&#xff0c;支持5.2MP分辨率&#xff0c;适合探测波长在400nm-1700nm波段的可见光和短波红外光&#xff0c;有效面积和透光率得到提升&#xff0c;内置TEC制冷片&#xff0c;实现了像素尺寸和图像均匀性方面…...

攻击渗透思考题

1. windows登录的明文密码&#xff0c;存储过程是怎么样的&#xff0c;密文存在哪个文件下&#xff0c;该文件是否可以打开&#xff0c;并且查看到密文 在Windows操作系统中&#xff0c;登录时输入的明文密码不会以明文形式存储在系统中。相反&#xff0c;Windows使用一种称为“…...

Flutter 中的 Opacity 小部件:全面指南

Flutter 中的 Opacity 小部件&#xff1a;全面指南 在Flutter中&#xff0c;动画和视觉效果是提升用户体验的重要手段。Opacity小部件允许你改变子组件的透明度&#xff0c;从而实现淡入、淡出或其它透明度相关的动画效果。本文将提供Opacity的全面指南&#xff0c;帮助你了解…...

【介绍下如何在SQL中添加数据】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

【Linux学习】深入了解Linux中进程状态及其转换

文章目录 进程状态进程排队进程的状态&#xff08;运行&#xff0c;阻塞&#xff0c;挂起&#xff09;进程的七个状态 孤儿进程 进程状态 进程 task_struct 可执行程序 进程不是一 直在运行的&#xff0c;可能在等待软硬件资源&#xff0c;比如scanf后&#xff0c;程序停止运…...

错位排序算法

首先&#xff0c;让我们理解什么是错位排列&#xff1a;错位排列是指在排列中&#xff0c;任何一个元素都不在自己原来的位置上。比如&#xff0c;对于序列 {1,2,3}{1,2,3}&#xff0c;一个错位排列可能是 {3,1,2}{3,1,2}&#xff0c;因为 11 不在位置 11 上&#xff0c;22 不在…...

Qwen3.5-2B镜像免配置部署:开箱即用WebUI(7860端口)快速上手教程

Qwen3.5-2B镜像免配置部署&#xff1a;开箱即用WebUI&#xff08;7860端口&#xff09;快速上手教程 1. 模型简介 Qwen3.5-2B是通义千问系列中的轻量化多模态基础模型&#xff0c;仅有20亿参数规模&#xff0c;专为低功耗、低门槛部署场景设计。这个版本特别适合在端侧设备和…...

ZGC停顿时间为何突然飙升?3个被90%团队忽略的配置雷区曝光

第一章&#xff1a;ZGC停顿时间为何突然飙升&#xff1f;3个被90%团队忽略的配置雷区曝光 ZGC&#xff08;Z Garbage Collector&#xff09;以亚毫秒级停顿著称&#xff0c;但生产环境中频繁出现 10–50ms 甚至更高停顿&#xff0c;往往并非内存压力所致&#xff0c;而是源于几…...

别再只用外部中断了!用STM32F103的TIM2输入捕获,实现更稳定的旋转编码器读数

旋转编码器信号捕获&#xff1a;STM32F103定时器输入捕获模式实战解析 旋转编码器作为工业控制和消费电子中的核心位置传感器&#xff0c;其信号处理的稳定性直接影响系统性能。许多开发者习惯采用外部中断方式读取AB相脉冲&#xff0c;但在高速旋转或存在机械抖动的场景下&…...

终极指南:用OpenCore Legacy Patcher让旧Mac焕发新生的5个简单步骤

终极指南&#xff1a;用OpenCore Legacy Patcher让旧Mac焕发新生的5个简单步骤 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否还在为手中的旧款Mac无法…...

springboot+vue基于web的校园电动车短租系统的设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能分析用户管理模块车辆管理模块租赁业务模块安全与风控模块统计与报表模块技术实现要点项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商…...

终极Windows驱动管家:DriverStore Explorer释放系统空间完全指南

终极Windows驱动管家&#xff1a;DriverStore Explorer释放系统空间完全指南 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 引言&#xff1a;被遗忘的驱动仓库 你是否曾疑惑为…...

大多数人用AI还是“一次性聊天” Claude Cowork却让你把重复工作彻底扔上自动驾驶

花大价钱开了Claude Pro&#xff0c;每天扔进去一句“帮我写文案”“帮我优化内容”&#xff0c;结果用完就关窗口&#xff0c;下次还是从零开始&#xff1f;重复任务永远在偷走你的注意力&#xff0c;脑子里永远挂着“待办事项”这个隐形标签&#xff0c;效率看起来提升了&…...

如何免费将OFD转PDF?Ofd2Pdf完整使用指南

如何免费将OFD转PDF&#xff1f;Ofd2Pdf完整使用指南 【免费下载链接】Ofd2Pdf Convert OFD files to PDF files. 项目地址: https://gitcode.com/gh_mirrors/ofd/Ofd2Pdf 你是否经常收到OFD格式的文件却无法打开&#xff1f;无论是电子发票、政府公文还是企业文档&…...

数字斯德哥尔摩:用户爱上折磨人的bug

在软件测试领域&#xff0c;我们经常面对一个悖论&#xff1a;用户有时会对那些反复出现、折磨人的bug产生一种依赖甚至“爱”的情感&#xff0c;这种现象被称为“数字斯德哥尔摩综合征”。它源于心理学中的斯德哥尔摩综合征——人质对劫持者产生情感依赖——在数字世界中&…...