小程序 表单验证

使用 WxValidate.js 插件来校验表单数据

常用实例方法 

名称返回类型描述
checkForm(e)boolean验证所有字段的规则,返回验证是否通过。
valid()boolean返回验证是否通过。
size()number返回错误信息的个数。
validationErrors()array返回所有错误信息。
addMethod(name, method, message)boolean添加自定义验证方法。

内置校验规则

序号规则描述
1required: true这是必填字段。
2email: true请输入有效的电子邮件地址。
3tel: true请输入11位的手机号码。
4url: true请输入有效的网址。
5date: true请输入有效的日期。
6dateISO: true请输入有效的日期(ISO),例如:2009-06-23,1998/01/22。
7number: true请输入有效的数字。
8digits: true只能输入数字。
9idcard: true请输入18位的有效身份证。
10equalTo: 'field'输入值必须和 field 相同。
11contains: 'ABC'输入值必须包含 ABC。
12minlength: 5最少要输入 5 个字符。
13maxlength: 10最多可以输入 10 个字符。
14rangelength: [5, 10]请输入长度在 5 到 10 之间的字符。
15min: 5请输入不小于 5 的数值。
16max: 10请输入不大于 10 的数值。
17range: [5, 10]请输入范围在 5 到 10 之间的数值。

 

根据 WxValidate.js 插件,定义 验证函数 initValidate 的规则及返回的信息,在 onLoad 生命周期中调用

使用 bindinput 、 bindblur 绑定事件和data-name传入对应的表单字段名 来实现单个输入框失焦的验证

initValidate() {//验证规则和提示信息let rulesAndMsg = {Name: {rules: {required: true},message: {required: '请输入姓名'}},IDCard: {rules: {required: true,idcard: true,},message: {required: '请输入身份证号',idcard: '请输入正确的身份证号码',}},Age: {rules: {required: true,rangeRom: [1, 120],},message: {required: '请输入年龄'}},}//实例化当前的验证规则和提示消息this.WxValidate = new WxValidate(rulesAndMsg);/*** 自定义验证规则传3个参数* name 是添加的方法的名字* method 是一个函数,value:元素的值,param是参数* message 是自定义的错误提示*/this.WxValidate.addMethod('rangeRom', (value, param) => {return this.WxValidate.optional(value) || (value >= param[0] && value <= param[1])}, '年龄范围是: 1-120');},

提交时校验

if (!this.WxValidate.checkForm(this.data.form)) {//表单元素验证不通过,此处给出相应提示this.setData({errorList: this.WxValidate.errorList,})return false;}

更改了方法具体文件点此处详见

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

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

相关文章

[containerd] 在Windows上使用IDEA远程调试containerd, ctr, containerd-shim

文章目录 1. containerd安装2. 源码编译3. 验证编译的二进制文件是否含有调试需要的信息3.1. objdump工具验证3.2. file工具验证3.3. dlv工具验证 4. debug 1. containerd安装 [Ubuntu 22.04] 安装containerd 2. 源码编译 主要步骤如下&#xff1a; 1、从github下载containe…

GO学习之 通道(Channel)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 文章目录 GO系列前言一、Channel 简介二、初始化通道2.1 无缓冲通道2.2 有缓冲通道2.3 单向通道 三、通道操作3.1 关闭通道…

[Java] 单例设计模式详解

模式定义&#xff1a;保证一个类只有一个实例&#xff0c;并且提供一个全局访问点&#xff0c;时一种创建型模式 使用场景&#xff1a;重量级的对象&#xff0c;不需要多个实例&#xff0c;如线程池&#xff0c;数据库连接池 单例设计模式的实现 1.懒汉模式&#xff1a;延迟…

第一次后端复习整理(JVM、Redis、反射)

1. JVM 文章仅为自身笔记 详情查看一篇文章掌握整个JVM&#xff0c;JVM超详细解析&#xff01;&#xff01;&#xff01; 1.1 什么是JVM jvm是Java虚拟机 1.2 Java文件的编译过程 程序员编写代码形成.java文件经过javac编译成.class文件再通过JVM的类加载器进入运行时数据…

【141. 环形链表】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#x…

JVM | 基于类加载的一次完全实践

引言 我在上篇文章&#xff1a;JVM | 类加载是怎么工作的 中为你介绍了Java的类加载器及其工作原理。我们简单回顾下&#xff1a;我用一个易于理解的类比带你逐步理解了类加载的流程和主要角色&#xff1a;引导类加载器&#xff0c;扩展类加载器和应用类加载器。并带你深入了解…

剑指offer12 矩阵中的路径 13 机器人的运动范围 34.二叉树中和为某一值得路径

class Solution { public:bool exist(vector<vector<char>>& board, string word) {int rowboard.size(),colboard[0].size();int index0,i0,j0;if(word.size()>row*col) return 0;//vector<vector<int>> visit[row][col];//标记当前位置有没有…

算法之归并排序算法

归并&#xff08;Merge&#xff09;排序法是将两个&#xff08;或两个以上&#xff09;有序表合并成一个新的有序表&#xff0c;即把待排序序列 分为若干个子序列&#xff0c;每个子序列是有序的。然后再把有序子序列合并为整体有序序列。 public class MergeSortTest {public …

到底什么是前后端分离

目录 Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 总结 Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 理解它们的区别有助于我们进行对应产品的测试工作。 前后端不分离 在早期&#xff0c;Web 应用开发主要采用前后端不…

linux系统下(centos7.9)安装Jenkins全流程

一、卸载历史版本 # rpm卸载 rpm -e jenkins# 检查是否卸载成功 rpm -ql jenkins# 彻底删除残留文件 find / -iname jenkins | xargs -n 1000 rm -rf二、环境依赖安装 yum -y install epel-releaseyum -y install daemonize三、安装Jenkins Jenkins官网传送带&#xff1a; …

《零基础入门学习Python》第071讲:GUI的终极选择:Tkinter8

虽然我们能用 tkinter 设计不少东西了&#xff0c;但是不少同学还是感觉对这个界面编程掌控得还不够多&#xff0c;说白了&#xff0c;就是我们现在还没办法随心所欲的去绘制我们想要的界面&#xff0c;但是不瞒你说&#xff0c;今天的这一节课将会给你的人生乃至人生观带来翻天…

VB+access文档管理系统设计与实现

内容摘要 《文档管理系统》是采用VISAUL BASIC6.0开发的一个数据库管理系统。本设计说明书主要讲述了VISAUL BASIC6.0的基本功能及设计方法。紧接着以本系统为例,逐一介绍开发本系统系统的步骤:系统分析、系统设计、系统实现、系统维护。在系统分析中先后用数据流图、数据字…

Android程序CPU使用大的异常分析

程序出现CPU使用过高的问题&#xff0c;如果能够重现&#xff0c;就比较好办了&#xff0c;可以top命令查看各线程的cpu使用&#xff0c;定位到线程。 以下是问国内某AI的答案 在Android应用中&#xff0c;如果某个应用消耗了大量的CPU资源&#xff0c;可以采取以下方法进行分…

分布式id、系统id、业务id以及主键之间的关系

推荐 连分布式ID都理解不了&#xff0c;你是刚培训出来冒充面试官的吧 1 分布式id、系统id、业务id以及主键之间的关系 分布式ID、系统ID、业务ID和主键的关系&#xff1a; 分布式ID&#xff1a;在分布式系统中&#xff0c;由于存在多个独立的节点&#xff0c;为了保证每个节…

苍穹外卖-day07

苍穹外卖-day07 本项目学自黑马程序员的《苍穹外卖》项目&#xff0c;是瑞吉外卖的Plus版本 功能更多&#xff0c;更加丰富。 结合资料&#xff0c;和自己对学习过程中的一些看法和问题解决情况上传课件笔记 视频&#xff1a;https://www.bilibili.com/video/BV1TP411v7v6/?sp…

CSS盒子模型(HTML元素布局)

CSS盒子模型是一种用于描述HTML元素布局的模型&#xff0c;它将每个元素看作是一个矩形的盒子&#xff0c;每个盒子由内容、内边距、边框和外边距组成。 盒子模型包括以下几个部分&#xff1a; 内容区域&#xff08;Content&#xff09; 内容区域是盒子中实际显示内容的部分&am…

Rust vs Go:常用语法对比(五)

题图来自 Rust vs Go 2023[1] 81. Round floating point number to integer Declare integer y and initialize it with the rounded value of floating point number x . Ties (when the fractional part of x is exactly .5) must be rounded up (to positive infinity). 按规…

KWP2000协议和OBD-K线

KWP2000最初是基于K线的诊断协议&#xff0c; 但是由于后来无法满足越来越复杂的需求&#xff0c;以及自身的局限性&#xff0c;厂商又将这套应用层协议移植到CAN上面&#xff0c;所以有KWP2000-K和KWP2000-CAN两个版本。 这篇文章主要讲基于K线的早期版本协议&#xff0c;认…

零售企业信息化系统建设与应用解决方案

导读&#xff1a;原文《零售企业信息化系统建设与应用解决方案ppt》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 完整版领取方式 如需获取完整的电子版内容参考学习…

基于Kaggle训练集预测的多层人工神经网络的能源消耗的时间序列预测(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f308;3 Matlab代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 本文为能源消耗的时间序列预测&#xff0c;在Matlab中实现。该预测采用多层人工神经网络&#xff0c;基于Kaggle训练集预测未来能源消耗。 &am…