vue 前端 邮箱、密码、手机号码等输入验证规则

最近在写前端表单验证的时候,发现一篇文章质量很好,所以写下这篇文章记录
原文章链接:vue 邮箱、密码、手机号码等输入验证规则

1.手机号

const checkPhone = (rule, value, callback) => {const phoneReg = /^1[34578]\d{9}$$/;if (!value) {return callback(new Error("电话号码不能为空"));}setTimeout(() => {if (!Number.isInteger(+value)) {callback(new Error("请输入数字值"));} else {if (phoneReg.test(value)) {callback();} else {callback(new Error("电话号码格式不正确"));}}}, 100);
};

2.邮箱

const checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;if (!value) {return callback(new Error("邮箱不能为空"));}setTimeout(() => {if (mailReg.test(value)) {callback();} else {callback(new Error("请输入正确的邮箱格式"));}}, 100);
};

3.密码

var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请设置正确格式的密码'));} else if(value.length < 6){callback(new Error('密码长度最小6位'));}else{callback();}
};

4.页面中调用

<el-form:model="addForm":label-position="labelPosition":rules="addFormRules"ref="addFormRef"label-width="80px">
<el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="phoneNumber"><el-input v-model="addForm.phoneNumber"></el-input>
</el-form-item>data() {return {addForm: {},addFormRules: {email: [{ required: true, validator: checkEmail, trigger: "blur" }],phoneNumber: [{ required: false, message: "请输入联系方式", validator: checkPhone, trigger: "blur"}],}}
}

全局验证规则脚本,需要的地方引入即可:

给页面表单对象添加验证属性
:rules=“registerRules” ref=“registerForm”
为el-form-item每个表单子项添加 prop 属性, 例如

<el-form-item prop="username"><el-input name="username" type="text" v-model="registerForm.username" placeholder="请设置登录用户名"></el-input>
</el-form-item>

rules是一个验证规则对象,因此需要在data()页面数据里添加registerRules对象:

registerRules: {username: [{ required: true, trigger: 'blur', validator: validateUsername }],password: [{ required: true, trigger: 'blur', validator: validatePassword }],password_repeat: [{ required: true, trigger: 'blur', validator: this.validatePassRepeat }],bind_phone: [{ required: true, trigger: 'blur', validator: validatePhone }],realname: [{ required: true, trigger: 'blur', validator: validateRealName }],id_number: [{ required: true, trigger: 'blur', validator: validateIdNumber }]
},

创建validate.js全局验证规则脚本,供页面灵活引入

/* 验证账号 */
export function validateUsername(rule, value, callback) {if (value.length < 6 || value.length > 20) {return callback(new Error('用户名不得小于6个或大于20个字符!'))} else {callback()}
}/* 验证密码 */
export function validatePassword(rule, value, callback) {if (value.length < 6) {return callback(new Error('密码不能小于6位'))} else {callback()}
}/* 合法邮箱 */
export function validateEmail(rule, value, callback) {const emailReg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/if (!value) {return callback(new Error('邮箱不能为空!!'))}setTimeout(() => {if (!emailReg.test(value)) {return callback(new Error('邮箱格式错误'))} else {callback()}}, 100)
}/* 合法手机号 */
export function validatePhone(rule, value, callback) {const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/if (!value) {return callback(new Error('手机号码不能为空!!'))}setTimeout(() => {if (!phoneReg.test(value)) {return callback(new Error('手机号码格式错误'))} else {callback()}}, 100)
}/* 合法真实姓名 */
export function validateRealName(rule, value, callback) {const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/if (!value) {return callback(new Error('真实姓名不能为空!!'))}setTimeout(() => {if (!realnameReg.test(value)) {return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))} else {callback()}}, 100)
}/* 合法身份证 */
export function validateIdNumber(rule, value, callback) {const idNumberReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/if (!value) {return callback(new Error('身份证号码不能为空!!'))}setTimeout(() => {if (!idNumberReg.test(value)) {return callback(new Error('您的身份证号码格式错误!'))} else {callback()}}, 100)
}

引入全局验证规则即可

import { validateUsername, validatePassword, validatePhone, validateRealName, validateIdNumber } from '../../utils/validate'

另外,大部分验证函数都是通过正则表达式来验证的,以下还有很多常见的正则式:

/* 合法的https或ftp地址 */
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$//* 小写字母 */
const reg = /^[a-z]+$//* 大写字母 *
const reg = /^[A-Z]+$/
/* 大小写字母*/
const reg = /^[A-Za-z]+$/

通过reg.test()函数判断是否符合正则式:

/* 判断str是否符合reg正则式,返回真或者假 */
reg.test(str)

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

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

相关文章

力扣刷题-翻转字符串

刷题链接&#xff1a;344. 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&…

【vue3】vue3接收props以及emit的用法

技术&#xff1a;vue3.2.40 UI框架&#xff1a;arco-design 2.44.7 css技术&#xff1a;less 4.1.3 实现&#xff1a;子组件接收props以及通过emit方法传值父组件 vue3使用的组合式API&#xff0c;我这里使用的是defineComponent 1.父页面调用子组件 <template><d…

FPGA开发:按键消抖

按键是FPGA开发板上的重要交互元件&#xff0c;因为按键的内部的结构设计&#xff0c;在按下和松开按键时&#xff0c;按键会无法避免地产生机械抖动&#xff0c;因此要对按键输入进行特殊处理&#xff0c;否则可能会因为机械抖动产生意外的重复触发。 按键消抖有很多方法&…

C++设计模式之模板方法、策略模式、观察者模式

面向对象设计模式是”好的面向对象设计“&#xff0c;所谓”好的面向对象设计“指的是可以满足”应对变化&#xff0c;提高复用“的设计。 现代软件设计的特征是”需求的频繁变化“。设计模式的要点是”寻求变化点&#xff0c;然后在变化点处应用设计模式&#xff0c;从而更好地…

我的2023上半年总结

Hi~C站的小伙伴们好久不见哇&#xff01;釉色终于回到C站&#xff0c;开始要输出了&#xff01;这一篇文章是我的2023上半年的总结&#xff0c;以此&#xff0c;致敬那段迷茫但又不曾被辜负的时光。 文章目录 总括——你愿意花五分钟时间读读我的文章吗学习——制定目标&#…

【Matlab】基于粒子群优化算法优化BP神经网络的时间序列预测(Excel可直接替换数据)

【Matlab】基于粒子群优化算法优化BP神经网络的时间序列预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码5.1 fun.m5.2 main.m 6.完整代码6.1 fun.m6.2 main.m 7.运行结果 1.模型原理 基于粒子群优化算法&#xff08;Pa…

nsq整体架构及各个部件作用详解

文章目录 前言 nsq的整体架构图 部件&#xff1a;nsqd 部件&#xff1a;nsqlookupd 部件&#xff1a;nsq连接库 部件&#xff1a;nsqadmin 前言 上两篇博客 centos环境搭建nsq单点_YZF_Kevin的博客-CSDN博客 linux环境搭建nsq集群_YZF_Kevin的博客-CSDN博客 我们讲了nsq是…

桥梁安全监测系统中数据采集上传用 什么?

背景 2023年7月6日凌晨时分&#xff0c;G5012恩广高速达万段230公里加80米处6号大桥部分桥面发生垮塌&#xff0c;导致造成2车受损后自燃&#xff0c;3人受轻伤。目前&#xff0c;四川省公安厅交通警察总队高速公路五支队十四大队民警已对现场进行双向管制。 作为世界第一桥梁…

Hadoop 之 Spark 配置与使用(五)

Hadoop 之 Spark 配置与使用 一.Spark 配置1.Spark 下载2.单机测试环境配置3.集群配置 二.Java 访问 Spark1.Pom 依赖2.测试代码1.计算 π 三.Spark 配置 Hadoop1.配置 Hadoop2.测试代码1.统计字符数 一.Spark 配置 环境说明环境版本AnolisAnolis OS release 8.6Jdkjava versi…

差速驱动机器人的车轮里程计模型

一、说明 车轮测程法是指使用旋转编码器(即连接到车轮电机以测量旋转的传感器)的测程法(即估计运动和位置)。这是轮式机器人和自动驾驶汽车定位的有用技术。 在本文中,我们将通过探索差速驱动机器人的车轮里程计模型来深入研究车轮里

mac使用mvn下载node-sass 会Binary download failed, trying source

m1 上使用nvm 以下node的版本可以直接下载&#xff08;Binary download&#xff0c;而不是 trying source&#xff09;而不用切换mac cpu架构 zhiwenwenzhiwenwendeMBP cockpit % nvm install 14.15.5 Downloading and installing node v14.15.5... Downloading https://node…

Windows环境下git客户端中的git-bash和MinGW64

我们在 Windows10 操作系统下&#xff0c;安装了 git 客户端之后&#xff0c;可以通过 git-bash.exe 打开一个 shell&#xff1a; 执行一些 linux 系统里的命令&#xff1a; 注意到上图紫色的 MINGW64. Mingw-w64 是原始 mingw.org 项目的改进版&#xff0c;旨在支持 Window…

SpringCloud学习路线(12)——分布式搜索ElasticSeach数据聚合、自动补全、数据同步

一、数据聚合 聚合&#xff08;aggregations&#xff09;&#xff1a; 实现对文档数据的统计、分析、运算。 &#xff08;一&#xff09;聚合的常见种类 桶&#xff08;Bucket&#xff09;聚合&#xff1a; 用来做文档分组。 TermAggregation&#xff1a; 按照文档字段值分组…

Shell脚本运算-双小括号(())

示例1&#xff1a;进行简单的数值计算&#xff1a; [rootvm1 scripts]# ((i5)) [rootvm1 scripts]# ((ii**2)) [rootvm1 scripts]# echo $i 25[rootvm1 scripts]# echo 6-3 6-3 [rootvm1 scripts]# echo $((6-3)) 3说明&#xff1a; 如果需要输出&#xff0c;就要加$符号。 示…

【SA8295P 源码分析】51 - QNX + Android NFS 完整配置

【SA8295P 源码分析】51 - QNX + Android NFS 完整配置 一、QNX 侧 NFS Server 修改:ip 为 192.168.118.21.1 配置拷贝 nfsd、rpcbind 到 /mnt 目录下1.2 配置 exports1.3 修 startup.sh 开机自启动 nfsd Server二、Android 侧 NFS Client 修改:ip 为 192.168.118.12.1 修改 …

Flutter Windows通过嵌入Native窗口实现渲染视频

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频&#xff08;本章&#xff09; 文章目录 Flutter视频渲染系列前言…

文心一言大模型测评

访问地址 文心一言服务请求地址&#xff1a;文心千帆大模型 (baidu.com) 新手可以先实名认证后再申请使用 测评 普通对话 这里先和他进行简单的问题讨论 编程相关 询问他有关代码的内容 确实可以生成代码&#xff0c;但不像chatgpt那样提供复制按钮 我们接下来让他生成…

3基本数据类型

文章目录 3.1. Java 中的几种基本数据类型是什么&#xff1f;对应的包装类型是什么&#xff1f;各自占用多少字节呢&#xff1f;3.2. 自动装箱与拆箱3.3. 八种基本类型的包装类和常量池 3.1. Java 中的几种基本数据类型是什么&#xff1f;对应的包装类型是什么&#xff1f;各自…

LeetCode45.Jump-Game-II<跳跃游戏II>

题目&#xff1a; 思路&#xff1a; 从上次大神那里获得的灵感 这题问的是次数,那么我们需要确保 1,能否跳到终点 2,得到次数. 第一次条获得的是nums[0],那么第一个数就是我们第一次能跳跃的范围.每次在范围里获得最大值.并且次数加一.然后进入下一次范围;即可得到次数; 代码…

明晚直播:可重构计算芯片的AI创新应用分享!

大模型技术的不断升级及应用落地&#xff0c;正在推动人工智能技术发展进入新的阶段&#xff0c;而智能化快速增长和发展的市场对芯片提出了更高的要求&#xff1a;高算力、高性能、灵活性、安全性。可重构计算区别于传统CPU、GPU&#xff0c;以指令驱动的串行执行方式&#xf…