vue前端表单常用的邮箱、电话、身份证、url、Ip等正则式多语言版校验
2024-01-07 18:51:27
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-./?%&=]*
:匹配零个或多个字母、数字、下划线、短横线、点、斜杠、问号、百分号和等号,表示路径和查询参数的一部分。?
:匹配查询参数的开始。
$
:匹配字符串的结束。
写在最后:
本文有什么错误的地方,往各位大佬及时指出,马上更正!
后续持续更新,你的点赞和关注~
是我进化道路上源源不断的动力!
文章来源:https://blog.csdn.net/weixin_44786330/article/details/135368529
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!