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('验证通过')})}
})

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

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

相关文章

#笔记#笔记#其他

大鱼论文是一款非常靠谱、方便、值得推荐的论文写作工具。无论是在学术研究中还是在日常写作中,大鱼论文都能够帮助用户轻松完成论文的写作工作。 首先,大鱼论文提供了强大的查重降重功能,能够帮助用户快速定位论文中可能存在的抄袭问题&…

Xcode 15 libarclite 缺失问题

升级到Xcode 15运行项目报错,报错信息如下: SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.a; try increasing the minimum d…

电力业务模型

电力业务模型 目录概述需求: 设计思路实现思路分析 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for change,challenge Survive. happy…

华为超融合数据中心网络【笔记】

对动态流量和海量参数调整,提炼出不同的流量特征模型;在交换机中实时采集流量特征和网络状态,使用独创的iLossless智能无损算法,本地实时决策并动态调整网络参数配置,使得交换机缓存被合理高效利用,实现整网…

基于PHP+MySQL组合开发的720VR全景小程序源码系统 一键生成三维实景 前后端分离带网站的安装代码包以及搭建教程

系统概述 这款源码系统是专门为实现 720VR 全景展示而设计的。它结合了先进的技术和创新的理念,能够将真实场景以全景的形式呈现给用户,让用户仿佛身临其境。该系统采用 PHP 进行后端开发,MySQL 作为数据库管理系统,确保了系统的…

debian 常用命令

Debian 是一个广泛使用的 Linux 发行版,这里列出了一些常用的 Debian 命令,适用于系统管理和日常使用: ### 文件与目录操作 1. **ls** - 列出目录内容: bash ls ls -l # 长格式显示 ls -a # 显示所有文件&#xff…

G60-M60F-ZQ手动抓取快速接头,专用于吊装设备的重物快速抓取

客户需求概述: 客户需要将重达将近400公斤的产品从一个工作台移动至另一个工作台,目前的方法是通过人工将吊环的螺纹与产品的螺纹相互拧紧,然后利用装备吊起移动,但这种方式效率低下,且因为工人的操作有时难以达到理想…

使用vanna实现Text2SQL

这节一起用vanna来实现自然语言转SQL,之前的大模型一直停留在问答阶段,答案基本都是大模型提供的,至多是加点本地知识库,tet,pdf等文档,丰富大模型的内容,但是想要大模型与一些管理系统对接还是…

XDebug配置极简教程,phpstorm实现http请求断点调试

写这篇的文章的初衷:网络上配置XDebug的文章有很多,XDebug也有官方的文档, PhpStorm也有官方的文档,为什么还要写那? 相信不少人,都有一种感觉,虽然教程很多,但是按教程走一遍,自己的确不能正常调试。 问题出在下面几个方面: 1. 对调试过程中,没有一定的认识,因此…

使用ETL读取文件数据并快速写入mysql中

本文介绍使用国产的ETL工具ETLCloud平台来读取文件文件中的数据到mysql数据库中,首先需要安装ETLCloud的社区版本,然后在示例应用中创建一个文件读取流程如下: 点击“流程设计”后打开流程图如下 打开文本文件读取节点配置要读取的文件目录和…

刷代码随想录有感(82):贪心算法——摆动序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int wiggleMaxLength(vector<int>& nums) {if(nums.size() < 1)return nums.size();int prediff 0;int curdiff 0;int res 1;for(int i 0; i < nums.size() - 1; i){curdiff nums[i 1] - nu…

【美羊羊拿金币问题】

问题&#xff1a; 有一天美羊羊正在草地上玩耍&#xff0c;突然天上开始落金币&#xff0c;这些金币掉落的范围在一个固定的水平区域内&#xff0c;但这些金币一旦掉落到地上就消失了&#xff0c;因此美羊羊只有不断地移动并从空中接住这些金币才能得到它们。假设金币掉落的位…

【OCPP】ocpp1.6协议第3.13章节SmartCharging介绍及翻译

目录 3.13 SmartCharging智能充电-概述 智能充电的目标 关键功能 消息类型 负载管理 动态电量配置 总结 3.13 SmartCharging智能充电-译文 3.13.1 Charging Profile Purpose充电配置的目的 3.13.2 Stacking charging profile堆叠充电配置 3.13.3 Combining charging profile pu…

OrangePi AIpro开发板,使用了310B,昇腾310B较于昇腾310有何性能提升?

OrangePi AIpro开发板 他们对应的模组分别是&#xff1a;Atlas 200 AI和Atlas 200I A2 310&#xff1a;基本规格 - Atlas 200 AI加速模块 用户指南 14 - 华为 (huawei.com) 310B&#xff1a;基本规格 - Atlas 200I A2 加速模块 用户指南 04 - 华为 (huawei.com)

java面试(多线程)

线程和进程的区别 程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至CPU&#xff0c;数据加载至内存。在指令运行过程中还需要用到磁盘&#xff0c;网络等设备。进程就是用来加载指令&#xff0c;管理内存&#xff0c;管…

详解makefile中addprefix

在 Makefile 中&#xff0c;$(addprefix prefix,names…) 是一个函数&#xff0c;用于将指定的前缀添加到一组空格分隔的文件名中。这个函数通常用于将相同的前缀添加到一组文件名或路径中&#xff0c;非常适合在 Makefile 中进行路径拼接操作。 语法&#xff1a; makefile C…

机器学习-4-模型评估和混淆矩阵和ROC曲线

通透!详解混淆矩阵和ROC曲线 一文彻底理解 ROC/AUC 概念(Python) 参考小白也能看懂的 ROC 曲线详解 参考分类模型的 ROC AUC 是 0.8266,啥意思? 参考ROC曲线绘制(python+sklearn+多分类) 机器学习中的metrics.classification_report函数 1 ROC曲线 ROC曲线是一种坐标图式…

微软提出“Copilot+ PCs”构想,强调本地AI处理;OpenAI暂停ChatGPT语音功能因声音相似争议

&#x1f989; AI新闻 &#x1f680; 微软提出“Copilot PCs”构想&#xff0c;强调本地AI处理 摘要&#xff1a;在微软 Build 开发者前瞻大会上&#xff0c;CEO 萨蒂亚・纳德拉介绍了“Copilot PCs”&#xff0c;一种新类 Windows PC&#xff0c;需配备神经处理单元&#xf…

27快28了,想转行JAVA或者大数据,还来得及吗?

转行到JAVA或者大数据领域&#xff0c;27岁快28岁的年龄完全来得及。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。…

ES数据导出成csv文件

推荐使用es2csv 工具。 命令行实用程序&#xff0c;用Python编写&#xff0c;用于用Lucene查询语法或查询DSL语法查询Elasticsearch&#xff0c;并将结果作为文档导出到CSV文件中。该工具可以在多个索引中查询批量文档&#xff0c;并且只获取选定的字段&#xff0c;这减少了查…