vue3 如何给表单添加表单效验+正则表达式

校验要求
我们的表单中有密码、电话号码 ,两项。

我们设置用密码为3到20位的非空字符

电话号码就用目前用的电话号码正则表达式,要求手机号码以 1 开头,第二位为 3 到 9 之间的数字,后面跟着任意 9 个数字,总共是 11 位数字。

<el-form-item label="手机号" prop="tel"><el-input v-model="ruleForm.tel" :rules="rules" /></el-form-item><el-form-item label="密码" prop="cipher"><el-input v-model="ruleForm.cipher" :rules="rules" /></el-form-item>

 做类型声明:

interface RuleForm {tel: stringcipher: string
}

然后对页面数据进行绑定:

const rules = reactive<FormRules<RuleForm>>({tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },{validator: checkEmail,trigger: 'blur'},],cipher: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 3,max: 20,message: '密码为3~20位非空字符',trigger: 'blur'},{validator: checkUserName,trigger: 'blur'},],
})

正则表达式:

//定义手机号校验规则
const checkEmail = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {const regEmail = /^1[3-9]\d{9}$/;if (value === '') {callback(new Error("输入不能为空"))} else if (regEmail.test(value)) {return callback();}callback(new Error("请输入正确手机号"));
}
//密码效验规则
const checkUserName = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {if (value.trim() === '') {callback(new Error("密码不可为空"))} else {return callback();}
}

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

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

相关文章

Intel HDSLB 高性能四层负载均衡器 — 代码剖析和高级特性

目录 文章目录 目录前言代码剖析软件架构目录结构配置解析启动流程分析数据面 jobs 注册数据面 jobs 执行 转发流程分析收包阶段L2 处理阶段L3 处理阶段L4 处理阶段 高级特性大象流转发优化快慢路径分离转发优化报文基础转发优化 最后参考文档 前言 在前 2 篇文章中&#xff0…

超详细的描述UItralytics中的特征增强方法

目录 yolov8导航 YOLOv8(附带各种任务详细说明链接) 各个特征增强参数概述 各个参数优缺点与调整技巧 1. hsv_h (色调调整) 2. hsv_s (饱和度调整) 3. hsv_v (亮度调整) 4. degrees (图像旋转) 5. translate (图像平移) 6. scale (图像缩放) 7. shear (图像剪切) …

Qt第三方库QHotKey设置小键盘数字快捷键

一、看了一圈没有找到可以设置小键盘的情况。 这两天在研究快捷键的使用。发现qt的里的快捷键不是全局的。找了两个第三方快捷键QHotKey&#xff0c;还有一个QxtGlobalShortcut。但是这两个都不能设置小键盘的数字。 比如QKeySequenceEdit &#xff08;Ctrl1&#xff09; 这个…

【SpringBoot】SpringBoot:构建实时聊天应用

文章目录 引言项目初始化添加依赖 配置WebSocket创建WebSocket配置类创建WebSocket处理器 创建前端页面创建聊天页面 测试与部署示例&#xff1a;编写单元测试 部署扩展功能用户身份验证消息持久化群组聊天 结论 引言 随着实时通信技术的快速发展&#xff0c;聊天应用在现代We…

Luma AI如何注册:文生视频领域的新星

文章目录 Luma AI如何注册&#xff1a;文生视频领域的新星一、Luma 注册方式二、Luma 的效果三、Luma 的优势四、Luma 的功能总结 Luma AI如何注册&#xff1a;文生视频领域的新星 近年来&#xff0c;Luma AI 凭借其在文生视频领域的创新技术&#xff0c;逐渐成为行业的新星。…

MySQL基础——多表查询和事务

目录 1多表关系 2多表查询概述 3连接查询 3.1内连接 3.2左外连接 3.3右外连接 3.4自连接 4联合查询 5子查询 5.1标量子查询(子查询结果为单个值) 5.2列子查询(子查询结果为一列) 5.3行子查询(子查询结果为一行) 5.4表子查询(子查询结果为多行多列) 6事务简介和操…

vulnhub靶场-xxe打靶教程

目录 靶机导入 信息收集 发现IP 端口扫描 目录扫描 漏洞利用 靶机下载地址&#xff1a;XXE Lab: 1 ~ VulnHub 靶机导入 导入虚拟机 开启虚拟机 信息收集 发现IP arp-scan -l 发现靶机IP是192.168.202.150 端口扫描 使用nmap进行扫描 nmap -sS -A 192.168.202.150 …

EasyRecovery2024数据恢复神器#电脑必备良品

EasyRecovery数据恢复软件&#xff0c;让你的数据重见天日&#xff01; 大家好&#xff01;今天我要给大家种草一个非常实用的软件——EasyRecovery数据恢复软件&#xff01;你是不是也曾经遇到过不小心删除了重要的文件&#xff0c;或者电脑突然崩溃导致数据丢失的尴尬情况呢&…

初识PHP

一、格式 每行以分号结尾 <?phpecho hello; ?>二、echo函数和print函数 作用&#xff1a;两个函数都是输出内容到页面中&#xff0c;多用于代码调试。 <?php echo "<h1 styletext-align: center;>test</h1>"; print "<h1 stylet…

【vue3中使用$refs】

在使用uniapp官网里的uni-popup弹出层组件时&#xff0c;要将vue2转换成vue3,&#xff0c;这里遇到了一个问题&#xff1a;vue2可以通过this访问到绑定的ref&#xff0c;但是vue3没有了this,应该怎么办呢&#xff1f; 解决方法&#xff1a; !

Footer组件在home 、search 显示,在登录、注册隐藏

footer组件显示与隐藏 我们可以根据组件身上的$route获取当前路由的信息&#xff0c;通过路由路径判断Footer显示与隐藏。配置的路由的时候&#xff0c;可以给路由添加路由元信息【meta】&#xff0c;路由需要配置对象&#xff0c;它的key不能瞎写、胡写、乱写 <template&…

基于 Nginx Ingress + 云效 AppStack 实现灰度发布

作者&#xff1a;子丑 场景简介 灰度发布是降低生产部署风险&#xff0c;提升线上服务稳定性的重要手段&#xff0c;这在当前快速迭代的软件研发中尤为重要。相对于 K8s 默认的滚动部署或者简单的 Pod 分批&#xff0c;基于流量特征的灰度发布验证更精准&#xff0c;风险更低…

将qt的子程序窗口嵌入qt的主进程主窗口中(第二种方式)

上一篇文章,存在失去焦点问题,分析可能原因是直接将子进程的窗口句柄封装到QWindow对象中之后,窗口的键盘事件可能就qt自己处理,但是目前没有搞清楚怎么处理的. 下面这种方式也类似第一种方式,不同点在于处理窗口句柄的方式. 通过自定义一个QWindow的一个子类,在子类中通过wi…

TypeScript中的Symbol,确实唯一。。。

Symbol 目录 Symbol 目录自动推断symbol unique symbol区别 自动推断 let命令声明的变量&#xff0c;推断类型为 symbol。// let定义symbol推断为symbol let sym Symbol(); //symbol但是&#xff0c;const命令声明的变量&#xff0c;如果赋值为另一个 symbol 类型的变量&…

解释双向队列(Deque)的概念,Java 中的 ArrayDeque 和 LinkedList 作为 Deque 的实现,它们各自有什么优缺点?

双向队列&#xff08;Deque&#xff0c;全称为 Double Ended Queue&#xff09;是一种具有队列和栈特性的数据结构&#xff0c;允许在两端进行元素的添加和移除操作。这意味着你可以在队列的前端&#xff08;头部&#xff09;或后端&#xff08;尾部&#xff09;进行入队&#…

从 Acme.Sh V3.0 说说 ZeroSSL

熟悉明月的都知道&#xff0c;明月一直都在使用 acme.sh 作为服务器端申请、部署、续期免费 SSL 证书的主要工具&#xff0c;今天在帮一个站长申请 SSL 证书的时候发现 acme.sh v3.0 开始默认的免费 SSL 证书变更为&#xff1a;ZeroSSL 了&#xff0c;这个 ZeroSSL 其实跟明月一…

在 C++ 中使用不同平台的时间函数及比较

在 C 编程中&#xff0c;时间函数的选择对于性能测量、任务调度和时间戳记录至关重要。不同的操作系统提供了不同的时间函数&#xff0c;同时在同一个平台上&#xff0c;也可能有多种不同的时间函数可供选择。本文将介绍在 C 中常用的时间函数&#xff0c;并比较它们在不同平台…

通俗范畴论2 有向图与准范畴

退一步海阔天空&#xff0c;在正式进入范畴论之前&#xff0c;我们可以重新审视一下我们是如何认识世界的&#xff0c;有了这个对人类认识世界过程的底层理解&#xff0c;可以帮助我们更好地理解范畴论。 对于人类认识世界&#xff0c;最神奇的一点就是这个世界居然是可以认识…

map文件分析

以下是一个具体的map文件示例&#xff0c;并附上详细的描述&#xff0c;帮助你更好地理解如何读取和分析map文件&#xff1a; 示例map文件 Memory ConfigurationName Origin Length Attributes FLASH 0x08000000 0x0…

初识docker插件

文章目录 一、Docker插件概述二、Docker插件的优势三、Docker插件的使用例子1. 安装Docker插件2. 启用Docker插件3. 创建卷并使用 四、常用的Docker插件五、总结 Docker插件&#xff08;Docker Plugin&#xff09;是Docker扩展功能的一种重要方式&#xff0c;它允许用户为Docke…