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

utils工具类中创建verify.js

• 常用表單校驗

//正则校验的正则表达式，这里注意正则表达式中的‘\’要使用‘\\’转义
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页面使用

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-./?%&=]*：匹配零个或多个字母、数字、下划线、短横线、点、斜杠、问号、百分号和等号，表示路径和查询参数的一部分。
  • ?：匹配查询参数的开始。
• $：匹配字符串的结束。

写在最后：
本文有什么错误的地方，往各位大佬及时指出，马上更正！
后续持续更新，你的点赞和关注~
是我进化道路上源源不断的动力！