vue前端表单常用的邮箱、电话、身份证、url、Ip等正则式多语言版校验

utils工具类中创建verify.js

  • 常用表單校驗
javascript 复制代码
//正则校验的正则表达式,这里注意正则表达式中的'\'要使用'\\'转义
const patterns = {
    "name": "^[a-zA-Z_][0-9a-zA-Z_]{0,}$",
    "phone": "^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$",
    "tel": "^(0\\d{2,3}-\\d{7,8}(-\\d{1,6})?)$",
    "email": "^[\\w\\.-]+@[a-zA-Z\\d\\.-]+\\.[a-zA-Z]{2,}$",
    "pwd": "^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\\(\\)])+$)([^(0-9a-zA-Z)]|[\\(\\)]|[a-z]|[A-Z]|[0-9]){8,}$",
    "ip": "^(?=(\\b|\\D))(((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))(?=(\\b|\\D))$",
    "IDCard": "(^\\d{15}$)|(^\\d{17}([0-9]|X)$)",
    "url": "^https?://([\\w-]+\\.)+[\\w-]+(/[\\w-./?%&=]*)?$"
}

//对应正则表达式的提示信息
const patternMsg_US = {
    "name": "请以字母、下划线开头并包括数字、字母、下划线组成",
    "phone": "手機號碼格式不正確",
    "tel": "電話號碼格式不正確",
    "email": "郵箱地址不正確",
    "pwd": "密码至少由8位包含字母、数字、特殊字符两种组合",
    "ip": "IP地址不正確",
    "IDCard": "身份證號碼不正確",
    "url": "鏈接格式不正確"
}
const patternMsg_CN = {
    "name": "请以字母、下划线开头并包括数字、字母、下划线组成",
    "phone": "手机号码格式不正确",
    "tel": "电话号码格式不正确",
    "email": "邮箱地址不正确",
    "pwd": "密码至少由8位包含字母、数字、特殊字符两种组合",
    "ip": "IP地址不正确",
    "IDCard": "身份证号码不正确",
    "url": "链接格式不正确"
}
const patternMsg_TW = {
    "name": "Please start with a letter and an underscore and include a number, a letter, and an underscore",
    "phone": "Mobile phone number is not in the correct format",
    "tel": "The phone number is not in the correct format",
    "email": "The email address is incorrect",
    "pwd": "The password consists of at least 8 characters, including letters, numbers, and special characters".
    "ip": "IP address is incorrect",
    "IDCard": "ID number is incorrect",
    "url": "Incorrect link format"
}
// 获取当前多语言类型
const defaultLang = 'zh-TW'
const lang = localStorage.getItem('lang') || defaultLang
const msgObj = {
    'en-US': { ...patternMsg_US },
    'zh-CN': { ...patternMsg_CN },
    'zh-TW': { ...patternMsg_TW }
}
//根据使用的正则返回对应的正则和信息对象
const pattern = (name, para = 'g', type = 'blur') => {
    return {
        pattern: new RegExp(patterns[name], para),
        message: msgObj[lang][name],
        trigger: type
    }
}

export default pattern;

vue页面使用

javascript 复制代码
import verify from '@/util/verify'

data(){
	return{
		rules:{
			passward: [{ required: true, message: this.$t('caleader.msg01'), trigger: 'change' }],
        	url: [verify('url')],
		}
	}
}

备注:

1、tel电话正则表达式:/^(0\d{2,3}-\d{7,8}(-\d{1,6})?)$/

  • ^:匹配字符串的开始。
  • (0\d{2,3}-\d{7,8}(-\d{1,6})?):匹配区号和电话号码的组合,其中:
    • 0:固定电话的区号通常以0开头。
    • \d{2,3}:匹配2到3位数字,可能是区号的一部分。
    • -:匹配区号和电话号码之间的横线。
    • \d{7,8}:匹配7到8位电话号码。
    • (-\d{1,6})?:可选部分,匹配横线后接1到6位分机号。
  • $:匹配字符串的结束

2、电子邮箱正则表达式:/^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/

  • ^:匹配字符串的开始。
  • [\w.-]+:匹配一个或多个字母、数字、下划线、点或短横线。
  • @:匹配邮箱地址中的 "@" 符号。
  • [a-zA-Z\d.-]+:匹配一个或多个字母、数字、点或短横线,表示域名的一部分。
  • .:匹配邮箱地址中的点。
  • [a-zA-Z]{2,}:匹配至少两个字母,表示域名的顶级域。
  • $:匹配字符串的结束。

3、身份证正则表达式:/(^\d{15}$)|(^\d{17}([0-9]|X)$)/

  • ^\d{15}$:匹配15位数字的身份证号码。
    • ^:匹配字符串的开始。
    • \d{15}:匹配15位数字。
    • $:匹配字符串的结束。

或者

  • ^\d{17}([0-9]|X)$:匹配18位数字或17位数字加上一个数字或字母X的身份证号码。
    • ^:匹配字符串的开始。
    • \d{17}:匹配17位数字。
    • ([0-9]|X):匹配一个数字或字母X。
    • $:匹配字符串的结束。

4、url正则表达式:^https?://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

  • ^:匹配字符串的开始。
  • https?:匹配 "http" 或 "https"。
  • ://:匹配 "😕/"。
  • ([\w-]+\.)+:匹配域名部分,其中:
    • [\w-]+:匹配一个或多个字母、数字、下划线或短横线,表示子域名的一部分。
    • \.:匹配域名中的点。
  • [\w-]+:匹配主域名部分。
  • (/[\w-./?%&=]*)?:匹配路径和查询参数部分,其中:
    • /:匹配路径的开始。
    • [\w-./?%&=]*:匹配零个或多个字母、数字、下划线、短横线、点、斜杠、问号、百分号和等号,表示路径和查询参数的一部分。
    • ?:匹配查询参数的开始。
  • $:匹配字符串的结束。

写在最后:

本文有什么错误的地方,往各位大佬及时指出,马上更正!

后续持续更新,你的点赞和关注~

是我进化道路上源源不断的动力!

相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2342 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全