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-./?%&=]*：匹配零个或多个字母、数字、下划线、短横线、点、斜杠、问号、百分号和等号，表示路径和查询参数的一部分。?：匹配查询参数的开始。
$：匹配字符串的结束。
写在最后：
本文有什么错误的地方，往各位大佬及时指出，马上更正！
后续持续更新，你的点赞和关注~
是我进化道路上源源不断的动力！