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