vue项目表单使用正则过滤ip、手机号

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

	  import useFormValidate from '@/hooks/useFormValidate'setup(props, { emit }) {const { validateName, validateIPAndPort } = useFormValidate()const state = reactive({workFaceInfo: props.info?.id ? props.info : {},sysTypeData: props.sysType,formRules: {name: [{required: true,message: '工作面名称不能为空',trigger: ['blur', 'change']},{validator: validateName,trigger: ['blur', 'change']}],address: [{required: true,message: '工作面IP端口不能为空',trigger: ['blur', 'change']},{validator: validateIPAndPort,trigger: ['blur', 'change']}],username: [{required: true,trigger: ['blur', 'change'],message: '请输入您的账号'},{ validator: validateMobilePhone, trigger: ['blur', 'change'] }],},}

useFormValidate .js

/*** 表单验证hooks* @returns*/
export default function () {// 匹配名称类字段const validateName = (rule, value, callback) => {// if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{1,20}$/.test(value)) {//   return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过20'))// }if (!/^.{1,20}$/.test(value)) {return callback(new Error('长度不超过20'))}return callback()}// 匹配value类字符串const validateValue = (rule, value, callback) => {if (!/^[\u4E00-\u9FA5a-zA-Z0-9_]{0,12}$/.test(value)) {return callback(new Error('请输入中文、英文字母、数字或下划线组合，长度不超过12'))}return callback()}// 匹配编码/标识符类字段const validateCode = (rule, value, callback) => {if (!/^[a-zA-Z_][a-zA-Z0-9_]{1,31}$/.test(value)) {return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))}return callback()}const validateProp = (rule, value, callback) => {if (!/^[a-zA-Z_][a-zA-Z0-9_]{0,31}$/.test(value)) {return callback(new Error('第一个字符不能是数字，支持英文、数字、下划线的组合，长度不超过32'))}return callback()}// 匹配入网VINconst validateVin = (rule, value, callback) => {if (!value) {return callback()}if (!/^[a-zA-Z0-9_:-]{1,50}$/.test(value)) {return callback(new Error('请输入英文字母、数字、下划线、冒号、短横线组合，长度不超过50'))}return callback()}//匹配故障码const validateFaultCode = (rule, value, callback) => {if (!value) {return callback()}if (!/^[a-zA-Z0-9_]{1,10}$/.test(value)) {return callback(new Error('请输入英文字母、数字或下划线组合，长度不超过10'))}return callback()}// 匹配路径类字段const validatePath = (rule, value, callback) => {if (!/^[a-zA-Z0-9_/%&',;=?\x22-]{1,200}$/.test(value)) {return callback(new Error('请输入合法的路径地址，长度不超过200'))}return callback()}// 匹配描述类字段const validateText = (rule, value, callback) => {if (value?.length > 200) {return callback(new Error('长度不超过200'))}return callback()}// 匹配邮箱地址const validateEmail = (rule, value, callback) => {if (!value) {return callback()}if (!/^.{0,32}$/.test(value)) {return callback(new Error('长度不超过32'))}if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {return callback(new Error('请输入合法的邮箱地址'))}return callback()}// 匹配手机号const validateMobilePhone = (rule, value, callback) => {if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {return callback(new Error('请输入合法的11位手机号码'))}return callback()}//匹配数字const validateNumber = (rule, value, callback) => {if (!/^([0-9]){0,20}$/.test(value)) {return callback(new Error('请输入数字，长度不超过20'))}return callback()}//匹配数字const validateIsNumber = (rule, value, callback) => {if (!value) {return callback()}if (!/^([+-]?[0-9]){0,999}$/.test(value)) {return callback(new Error('请输入数字'))}return callback()}//匹配数字长度不超10const validateIsNumber10 = (rule, value, callback) => {if (!value) {return callback()}if (!/^([+-]?[0-9]){0,10}$/.test(value)) {return callback(new Error('请输入数字,长度不超过10'))}return callback()}//匹配正整数，小数const validateNumberFloat = (rule, value, callback) => {if (!/^\d+(\.\d+)?$/.test(value)) {return callback(new Error('请输入数字'))}return callback()}const validateInteger = (rule, value, callback) => {if (!/^([0-9]*){0,5}$/.test(value)) {return callback(new Error(`请输入1~10000之间的整数`))}return callback()}//匹配ip地址的校验const validateIP = (rule, value, callback) => {if (!/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/.test(value)) {return callback(new Error(`请输入合法的IP地址`))}return callback()}//匹配端口const validatePort = (rule, value, callback) => {if (!/^((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/g.test(value)) {return callback(new Error(`请输入合法的端口号`))}return callback()}//匹配ip/ip+端口const validateIPAndPort = (rule, value, callback) => {const ipRegex = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/const ipAndPortRegex = /^((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]):((6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])|[0-5]?\d{0,4})$/if (!ipRegex.test(value) && !ipAndPortRegex.test(value)) {return callback(new Error(`请输入合法的IP地址或IP地址和端口号`))}return callback()}//匹配50个字符长度const validateLength50 = (rule, value, callback) => {if (!/^.{0,50}$/.test(value)) {return callback(new Error('长度不超过50'))}return callback()}//匹配以http,https开头的地址const validateUrlAdress = (rule, value, callback) => {if (value) {if (!/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {return callback(new Error('地址需以http://,https://开头'))}if (!/^.{0,500}$/.test(value)) {return callback(new Error('长度不超过500'))}}return callback()}return {validateName,validateValue,validateCode,validateProp,validatePath,validateText,validateEmail,validateMobilePhone,validateInteger,validateIP,validatePort,validateIPAndPort,validateVin,validateNumber,validateIsNumber,validateIsNumber10,validateFaultCode,validateLength50,validateUrlAdress,validateNumberFloat}
}

手机号验证

<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form"><div class="form-bg"><img src="../../assets/images/login/formbg.png" /></div><h3 class="login-title"></h3><div class="form-box"><el-form-item prop="username"><el-input class="login-input" v-model="loginForm.username" size="large" type="text" auto-complete="off" placeholder="账号" autofocus @keyup.enter="handleLogin"><template #prefix><svg t="1669889721496" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8250" width="32" height="32"><pathd="M774.21758248 133.2144911l-308.63958662 308.68902431c-90.718187-42.91192715-202.39796052-27.04242413-277.44439533 48.00401067-95.51364429 95.51364429-95.51364429 250.4514089 0 345.9650532s250.4514089 95.51364429 345.9650532 0c75.04643481-75.04643481 90.86650012-186.67677063 48.00401066-277.49383305l117.21679639-117.21679637 74.45318236 74.45318235c22.24696684 22.24696684 58.33649082 22.29640455 80.63289536 0l33.61763877-33.61763878c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-42.07148616-42.07148617 0.0494377-0.04943771-32.43113389-32.28282077 77.22169379-77.22169378c22.24696684-22.24696684 22.29640455-58.33649082 0-80.63289537l-35.89177316-35.89177316c-22.29640455-22.29640455-58.38592852-22.29640455-80.68233307 0zM419.35374254 721.1771058c-32.18394536 32.18394536-84.34072317 32.13450766-116.47523082-0.0494377-32.18394536-32.18394536-32.18394536-84.34072317-1e-8-116.52466853s84.34072317-32.13450766 116.47523083 0.0494377 32.23338307 84.29128546 1e-8 116.52466853z"p-id="8251"></path></svg></template></el-input></el-form-item><el-form-item prop="password"><el-inputclass="login-input password-input"v-model="loginForm.password":type="showOpenEye ? 'text' : 'password'"auto-complete="off"placeholder="密码"size="large"@keyup.enter="handleLogin"><template #prefix><svg t="1669890083558" class="divicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8394" width="32" height="32"><pathd="M848.09719641 814.04327668l0 24.74195525c0 51.22107559-134.22763586 95.08976724-134.22763586 95.08976725l-55.92870868-7.11099317c0 0-89.44187201-11.18616311-145.4137998-11.18616312-55.88970667 0-145.4137998 11.18616311-145.4137998 11.18616312l-55.51866184 6.94655255c0 0-134.63768272-43.89082855-134.63768272-94.92532745l0-24.74195526c0-47.60444092 62.0562214-95.6463349 134.7852574-132.4904708 3.5228194-1.78038337 47.22812513 245.71400839 47.22812511 245.7140084l19.32912516-0.50280826c0 0-37.34694415-255.53405127-33.55638162-257.27121716 20.13235373-9.2076081 33.37718445-17.83756631 53.18065695-24.98123666 7.34605828-2.67637253 42.46567795-21.74935034 22.81926736-73.11062192-45.50150116-46.38167908-76.49746161-91.32028775-76.49746161-192.65879005l337.61827003 0c0 100.28861362-31.78759324 145.64359397-76.98867491 192.08957355l0.26141831 0c-19.21422766 58.2656597 11.51399047 72.08392319 16.40714557 73.66824344 19.59686828 6.47853003 39.1062453 16.60426336 58.76846795 24.99283245 4.87207371 2.07553271-33.55743631 257.27121716-33.55743631 257.27121717l20.42750308-0.54813428c0 0 41.66139634-246.68483917 45.92208912-244.59876534C786.9359103 717.76342478 848.09719641 765.46695111 848.09719641 814.04327668L848.09719641 814.04327668zM704.97713017 272.01821487c0-116.45542393-158.58695132-174.67786533-158.58695134-174.67786532-22.4598175-10.11519223-44.75414053-7.81091922-67.72625271 0 0 0-158.59327534 51.12198935-158.59327533 174.67786532 0 18.47213801-33.52475913 14.50659458-44.61710697 72.93669489l474.15650455 0C729.42393606 286.12108743 704.97713017 290.49035287 704.97713017 272.01821487L704.97713017 272.01821487zM704.97713017 272.01821487"p-id="8395"></path></svg></template><template #suffix><svgv-if="showOpenEye"t="1669890127355"class="divicon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="8538"width="32"height="32"@click="showOpenEye = !showOpenEye"><pathd="M512 212C312.00000031 212 141.2 336.39999969 72.00000031 512c69.19999969 175.60000031 240 300 439.99999969 300s370.8-124.39999969 439.99999969-300c-69.19999969-175.60000031-240-300-439.99999969-300zM512 711.99999969c-110.4 0-199.99999969-89.59999969-199.99999969-199.99999969s89.59999969-199.99999969 199.99999969-199.99999969 199.99999969 89.59999969 199.99999969 199.99999969-89.59999969 199.99999969-199.99999969 199.99999969z m0-319.99999969c-66.40000031 0-120 53.59999969-120 120s53.59999969 120 120 120 120-53.59999969 120-120-53.59999969-120-120-120z"p-id="8539"></path></svg><svgv-elset="1669890138247"class="divicon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="8682"width="32"height="32"@click="showOpenEye = !showOpenEye"><pathd="M920.534375 317.178125a33.75 33.75 0 0 0-47.625 3.05625c-58.228125 66.215625-118.509375 116.371875-179.165625 149.0625-59.2125 31.95-120.609375 48.140625-182.45625 48.140625S388.19375 501.246875 329.1875 469.334375c-60.39375-32.690625-120.3-82.81875-178.040625-148.996875a33.75 33.75 0 0 0-50.86875 44.371875c41.85 47.9625 85.0875 88.3875 129.159375 120.834375l-54.440625 54.45a33.75 33.75 0 0 0 47.728125 47.728125l64.5-64.5c3.271875 1.875 6.5625 3.703125 9.834375 5.475a479.325 479.325 0 0 0 91.875 38.30625l-31.875 104.634375a33.75 33.75 0 1 0 64.575 19.6875l33.54375-110.109375a422.578125 422.578125 0 0 0 56.04375 3.75 424.63125 424.63125 0 0 0 56.165625-3.75l33.525 110.109375a33.75 33.75 0 1 0 64.575-19.6875l-31.875-104.634375A483.309375 483.309375 0 0 0 725.75 528.725c3.084375-1.659375 6.159375-3.375 9.24375-5.11875l64.10625 64.115625a33.75 33.75 0 0 0 47.728125-47.728125l-53.859375-53.896875C837.490625 453.575 881.215625 413 923.5625 364.8125a33.75 33.75 0 0 0-3.028125-47.634375z"p-id="8683"></path></svg></template></el-input></el-form-item><div class="forget-password" @click="forgetPassword">忘记密码</div><el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button></div></el-form><div class="forget-password" @click="forgetPassword">忘记密码</div><el-button class="syzk-button mt-20" :class="{ 'syzk-button-active': loading }" :loading="loading" style="width: calc(100% - 4.6rem)" @click="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button>

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

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

相关文章

wsl中的Ubuntu安装远程桌面

wsl中的Ubuntu安装远程桌面

wsl Ubuntu默认只能打开命令行&#xff0c;看不到图形化界面&#xff0c;有些操作不方便。这里介绍两种方法来远程连接到wsl里 VNC 因为win10的wsl不支持systemd&#xff0c; 所以这种方式只能是Windows11的系统&#xff0c;Window10只能用xrdp 1、禁用WSLg 在c:\users\用户…
阅读更多...
12.31_黑马数据结构与算法笔记Java

12.31_黑马数据结构与算法笔记Java

目录 345 设计跳表 Leetcode 1206 346 设计最小栈 Leetcode 155 347 设计端网址 Leetcode 355 348 设计推特 Leetcode 355 349 股票系列问题 Leetcode 121 350 股票系列问题 Leetcode 122 351 股票系列问题 Leetcode 714 352 股票系列问题 Leetcode 309 353 股票系列问…
阅读更多...
【Redis-10】Redis集群的实现原理和实践

【Redis-10】Redis集群的实现原理和实践

Redis集群是Redis提供的分布式数据库方案&#xff0c;通过分片来进行数据共享&#xff0c;实现复制和故障转移的功能。 1. Redis集群节点 一个Redis集群由多个节点组成&#xff0c;多个节点可以通过命令实现连接&#xff0c;由独立状态转为集群状态&#xff0c;命令是cluster …
阅读更多...
LabVIEW开发智能火灾自动报警系统

LabVIEW开发智能火灾自动报警系统

LabVIEW开发智能火灾自动报警系统 系统基于LabVIEW虚拟仪器开发&#xff0c;由火灾报警控制器、感温感烟探测器、手动报警器、声光报警器、ZigBee无线通讯节点以及上位机电脑等组成&#xff0c;展示了LabVIEW在智能化火灾预警与控制方面的应用。该系统通过结合二总线协议和Zig…
阅读更多...
动态规划10-多重背包

动态规划10-多重背包

题目描述 有N种物品和一个容量为V 的背包。第i种物品最多有Mi件可用&#xff0c;每件耗费的空间是Ci &#xff0c;价值是Wi 。求解将哪些物品装入背包可使这些物品的耗费的空间 总和不超过背包容量&#xff0c;且价值总和最大。 思路分析 区别于完全背包和简单的01背包问题&…
阅读更多...
天擎离线升级工具使用说明

天擎离线升级工具使用说明

免责声明 本文旨在提供信息和解决问题的建议&#xff0c;观点和建议可能不适用于个人情况&#xff0c;仅供参考&#xff01;&#xff01;&#xff01; 文章中所有敏感信息已经修改&#xff0c;对于因本文中提供的信息而导致的任何直接或间接损失或损害不承担责任。 使用本文中的…
阅读更多...
【C++】STL 容器 - multiset 容器 ( std::multiset 容器简介 | std::multiset 容器 常用操作 api 简介 )

【C++】STL 容器 - multiset 容器 ( std::multiset 容器简介 | std::multiset 容器 常用操作 api 简介 )

文章目录 一、mulset 容器1、std::multiset 容器简介2、代码示例 - multiset 容器 二、std::multiset 容器 常用操作 api 简介1、常用 api 简介2、代码示例 - multiset 容器常用操作 一、mulset 容器 1、std::multiset 容器简介 在 C 语言 的 标准模板库 ( STL , Standard Temp…
阅读更多...
街道洗扫车VR虚拟仿真展示创新了培训方式

街道洗扫车VR虚拟仿真展示创新了培训方式

吸污车用于收集处理城市中的污水、污泥&#xff0c;起到疏通管道的作用&#xff0c;特别是洪涝灾害时是重要的清理工具。吸污车由于内部结构复杂、工艺原理繁琐且造价成本高&#xff0c;因此传统的吸污车作业培训难以达到满意效果。VR虚拟仿真技术的出现&#xff0c;给企业提供…
阅读更多...
多线程编程设计模式(单例,阻塞队列,定时器,线程池)

多线程编程设计模式(单例,阻塞队列,定时器,线程池)

&#x1f495;"只有首先看到事情的可能性&#xff0c;才会有发生的机会。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;多线程编程设计模式(单例,阻塞队列,定时器,线程池) 本文主要讲解多线程编程中常用到的设计模式,包括单例模式,阻塞队列,定时…
阅读更多...
2023年度总结——我关注的技术界大事回顾

2023年度总结——我关注的技术界大事回顾

2023年发生了那么多新闻事件&#xff0c;作为程序员更关注哪些事件呢&#xff0c;这些事件又能引起什么人生感触呢&#xff0c;在这篇文章中你将看到我的想法&#xff0c;那你有什么想法呢 2023技术大事回顾 跟你说话的不一定是人——ChatGPT4开启人工智能新篇章 2023年3月15…
阅读更多...
AI产品经理-借力

AI产品经理-借力

AI产品经理-借力&#xff1a;学会善用供应商改造自有产品 1.整个项目的工作方法 2.项目启动-行业调研 3.项目启动-供应商选型
阅读更多...
Spring Boot快速搭建一个简易商城项目【一展示商城首页篇】

Spring Boot快速搭建一个简易商城项目【一展示商城首页篇】

前言&#xff1a;今天我来使用Spring Boot快速搭建一个简易商城项目以下是相关的思路流程&#xff0c;如果有更好的思路&#xff0c;欢迎大佬评论留言&#xff01;&#xff01;&#xff01; 一&#xff0c;实现思路&#xff1a; 创建 Spring Boot 项目&#xff1a; 使用 Spring…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023