小程序 表单验证
使用 WxValidate.js 插件来校验表单数据
常用实例方法
| 名称 | 返回类型 | 描述 |
|---|---|---|
| checkForm(e) | boolean | 验证所有字段的规则,返回验证是否通过。 |
| valid() | boolean | 返回验证是否通过。 |
| size() | number | 返回错误信息的个数。 |
| validationErrors() | array | 返回所有错误信息。 |
| addMethod(name, method, message) | boolean | 添加自定义验证方法。 |
内置校验规则
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required: true | 这是必填字段。 |
| 2 | email: true | 请输入有效的电子邮件地址。 |
| 3 | tel: true | 请输入11位的手机号码。 |
| 4 | url: true | 请输入有效的网址。 |
| 5 | date: true | 请输入有效的日期。 |
| 6 | dateISO: true | 请输入有效的日期(ISO),例如:2009-06-23,1998/01/22。 |
| 7 | number: true | 请输入有效的数字。 |
| 8 | digits: true | 只能输入数字。 |
| 9 | idcard: true | 请输入18位的有效身份证。 |
| 10 | equalTo: 'field' | 输入值必须和 field 相同。 |
| 11 | contains: 'ABC' | 输入值必须包含 ABC。 |
| 12 | minlength: 5 | 最少要输入 5 个字符。 |
| 13 | maxlength: 10 | 最多可以输入 10 个字符。 |
| 14 | rangelength: [5, 10] | 请输入长度在 5 到 10 之间的字符。 |
| 15 | min: 5 | 请输入不小于 5 的数值。 |
| 16 | max: 10 | 请输入不大于 10 的数值。 |
| 17 | range: [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;}
更改了方法具体文件点此处详见
相关文章:
小程序 表单验证
使用 WxValidate.js 插件来校验表单数据 常用实例方法 名称返回类型描述checkForm(e)boolean验证所有字段的规则,返回验证是否通过。valid()boolean返回验证是否通过。size()number返回错误信息的个数。validationErrors()array返回所有错误信息。addMethod(name…...
本地仓库推送至远程仓库
1. 本地生成ssh密钥对 ssh-keygen -t rsa -C 邮箱2. 添加公钥到gitlab/github/gitee上 打开C:\Users\用户名\.ssh目录下生成的密钥文件id_rsa.pub,把内容复制到如下文本框中 删除Expiration date显示的日期,公钥有效期变成永久,之后点Add K…...
【Unity2D】角色动画的切换
动画状态转换 第一种方法是设置一个中间状态,从中间状态向其余各种状态切换,且各状态向其他状态需要设置参数 实现动作转移时右键点击Make Transition即可 实现动画转移需要设置条件 点击一种动画到另一种动画的线 ,然后点击加号添加Condi…...
【MATLAB第62期】基于MATLAB的PSO-NN、BBO-NN、前馈神经网络NN回归预测对比
【MATLAB第62期】基于MATLAB的PSO-NN、BBO-NN、前馈神经网络NN回归预测对比 一、数据设置 1、7输入1输出 2、103行样本 3、80个训练样本,23个测试样本 二、效果展示 NN训练集数据的R2为:0.73013 NN测试集数据的R2为:0.23848 NN训练集数据的…...
深度剖析C++ 异常机制
传统排错 我们早在 C 程序里面传统的错误处理手段有: 终止程序,如 assert;缺陷是用户难以接受,说白了就是一种及其粗暴的手法,比如发生内存错误,除0错误时就会终止程序。 返回错误码。缺陷是需要我们自己…...
adb no permissions (user *** is not in the plugdev group)
首次配置ubuntu下的adb 环境,执行了adb device命令会出现以下问题 lvilvi-PC:~/develop/android/sdk/platform-tools$ adb devices List of devices attached 123699aac6536d65 no permissions (user lvi is not in the plugdev group); see [http://develo…...
【外卖系统】分类管理业务
公共字段自动填充 需求分析 对于之前的开发中,有创建时间、创建人、修改时间、修改人等字段,在其他功能中也会有出现,属于公共字段,对于这些公共字段最好是在某个地方统一处理以简化开发,使用Mybatis Plus提供的公共…...
es报错[FORBIDDEN/12/index read-only / allow delete (api)]
报错 [FORBIDDEN/12/index read-only / allow delete (api)] es磁盘满了 postman请求 put 请求 http://loclahost:9200/_settings {"settings": {"index": {"blocks": {"read_only_allow_delete": "false"}}} }...
关于网络通信安全协议的一些知识(ssl,tls,CA,https)
首先了解一下http协议的变迁。 http1.0默认短连接,1.1默认长连接并且可以管道传输,但是存在队头阻塞问题; https就是在tcp和http之间加了SSL/TLS层。 http2也是安全的,改进是hpack二进制和编码压缩减小体积,stream没有…...
Generative Diffusion Prior for Unified Image Restoration and Enhancement 论文阅读笔记
这是CVPR2023的一篇用diffusion先验做图像修复和图像增强的论文 之前有一篇工作做了diffusion先验(Bahjat Kawar, Michael Elad, Stefano Ermon, and Jiaming Song, “Denoising diffusion restoration models,” arXiv preprint arXiv:2201.11793, 2022. 2, 4, 6,…...
GAMES101 笔记 Lecture13 光线追踪1
目录 Why Ray Tracing?(为什么需要光线追踪?)Basic Ray Tracing Algorithm(基础的光线追踪算法)Ray Casting(光线的投射)Generating Eye Rays(生成Eye Rays) Recursive(Whitted-Styled) Ray Tracing Ray-Surface Intersection(光线和平面的交点)Ray Rquation(射线方…...
【多模态】21、BARON | 通过引入大量 regions 来提升模型开放词汇目标检测能力
文章目录 一、背景二、方法2.1 主要过程2.2 Forming Bag of Regions2.3 Representing Bag of Regions2.4 Aligning bag of regions 三、效果 论文:Aligning Bag of Regions for Open-Vocabulary Object Detection 代码:https://github.com/wusize/ovdet…...
2023“Java 基础 - 中级 - 高级”面试集结,已奉上我的膝盖
Java 基础(对象线程字符接口变量异常方法) 面向对象和面向过程的区别? Java 语言有哪些特点? 关于 JVM JDK 和 JRE 最详细通俗的解答 Oracle JDK 和 OpenJDK 的对比 Java 和 C的区别? 什么是 Java 程序的主类&…...
开源项目-erp企业资源管理系统(毕设)
哈喽,大家好,今天给大家带来一个开源项目-erp企业资源管理系统,项目通过ssh+oracle技术实现。 系统主要有基础数据,人事管理,采购管理,销售管理,库存管理,权限管理模块 登录 主页 基础数据 基础数据有商品类型,商品,供应商,客户,仓库管理功能...
Leetcode刷题---C语言实现初阶数据结构---单链表
1 删除链表中等于给定值 val 的所有节点 删除链表中等于给定值 val 的所有节点 给你一个链表的头节点head和一个整数val,请你删除链表中所有满足Node.valval的节点,并返回新的头节点 输入:head [1,2,6,3,4,5,6], val 6 输出:[…...
opencv hand openpose
使用opencv c 来调用caffemodel 使用opencv 得dnn 模块调用 caffemodel得程序,图片自己输入就行,不做过多得解释,看代码清单。 定义手指关节点 const int POSE_PAIRS[20][2] { {0,1}, {1,2}, {2,3}, {3,4}, // thumb {0,5}, {5,6}, {6,7}…...
flutter fl_chart 柱状图 柱条数量较多 实现左右滑动 固定y轴
一、引入插件 pub.dev:fl_chart package - All Versions 根据项目版本,安装可适配的 fl_chart 版本 二、官网柱状图示例 github参数配置:(x轴、y轴、边框、柱条数据、tooltip等) https://github.com/imaNNeo/fl_c…...
CAN学习笔记1:计算机网络
计算机网络 1 概述 计算机网络就是把多种形式的计算机用通信线路连接起来,并使其能够互相进行交换的系统。实际上,计算机网络包括了计算机、各种硬件、各种软件、组成网络的体系结构、网络传输介质和网络通信计数。因此,计算机网络是计算机…...
NAND flash的坏块
NAND flash的坏块 1.为什么会出现坏块 由于NAND Flash的工艺不能保证NAND的Memory Array(由NAND cell组成的阵列)在其生命周期中保持性能的可靠(电荷可能由于其他异常原因没有被锁起来。因此,在NAND的生产中及使用过程中会产生坏…...
代码随想录算法训练营第二十五天 | 读PDF复习环节3
读PDF复习环节3 本博客的内容只是做一个大概的记录,整个PDF看下来,内容上是不如代码随想录网站上的文章全面的,并且PDF中有些地方的描述,是很让我疑惑的,在困扰我很久后,无意间发现,其网站上的讲…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
