最新JS正则表达式验证邮箱和手机号实例(2022)
作者:Naive_Jam
在前端开发过程中,通过使用JS的正则表达式来校验输入的邮箱或者手机号是否正确,这也是一个非常常见的业务情景需求,下面这篇文章主要给大家介绍了关于利用JS正则表达式验证邮箱和手机号的相关资料,需要的朋友可以参考下
验证邮箱的正则表达式:
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
或
const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
验证手机号的正则表达式:
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
data() { // 验证邮箱的规则 var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式 const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if (regEmail.test(value)) { // 合法邮箱 return cb() } cb(new Error('请输入合法的邮箱')) } // 验证手机号的规则 var checkMobile = (rule, value, cb) => { // 验证手机号的正则表达式 const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ if (regMobile.test(value)) { // 合法手机号 return cb() } cb(new Error('请输入合法的手机号')) } return { // 添加表单的验证规则对象 addFormRules: { email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }, ], mobile: [ { required: true, message: '请输入手机', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] } } }
不合法的提示:
合法的:
rules的另一个用法:
pattern
data() { return { // 添加表单的验证规则对象 addFormRules: { email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/, message: '请输入合法的邮箱', trigger: 'blur' }, ], mobile: [ { required: true, message: '请输入手机', trigger: 'blur' }, { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入合法的手机号', trigger: 'blur' }, ] } } }
补充:整理了一些最近自己常用的正则表达式,希望能对大家有所帮助!
/* 合法uri */ export function validateURL(textval) { const urlregex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/ return urlregex.test(textval) } /* 小写字母 */ export function validateLowerCase(str) { const reg = /^[a-z]+$/ return reg.test(str) } /* 大写字母 */ export function validateUpperCase(str) { const reg = /^[A-Z]+$/ return reg.test(str) } /* 大小写字母 */ export function validateAlphabets(str) { const reg = /^[A-Za-z]+$/ return reg.test(str) } /* 市场售价 */ export function validatePrice(str) { const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/ return reg.test(str) } /* 库存预警值 匹配非负整数(正整数 + 0) */ export function validatestockWarn(str) { const reg = /^(0|[1-9][0-9]*)$/ return reg.test(str) } /* 比价网站 只验证京东和苏宁网站 */ export function validateCompareWebsite(str) { const reg = /^((https\:\/\/[0-9a-zA-Z\_]+\.|http\:\/\/[0-9a-zA-Z\_]+\.|https\:\/\/|http\:\/\/)|([0-9a-zA-Z\_]+\.){0,1})(jd|suning)\.(com$|com\/[\S]*)/i return reg.test(str) } /* 固定电话 */ export function validateTelephone(str) { const reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/ return reg.test(str) } /* 手机号码 */ export function validatePhoneNumber(str) { const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ return reg.test(str) } /* 手机号码和固定电话 */ export function validatePhTelNumber(str) { const reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/ return reg.test(str) } /* 电子邮箱 */ export function validateEmail(str) { const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ return reg.test(str) } /* 邮编 */ export function validateZipCode(str) { const reg = /^[1-9][0-9]{5}$/ return reg.test(str) } /* 身份证 */ export function validateIDCard(str) { const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ return reg.test(str) } /* 银行卡号 15位或者16位或者19位 */ export function validateBank(str) { const reg = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/ return reg.test(str) } /* 纳税人识别码 */ export function validateTaxpayer(str) { const reg = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/ return reg.test(str) } /* 匹配全空格 */ export function validateAllBlank(str) { const reg = /^\s+$/gi return reg.test(str) }
总结
到此这篇关于最新JS正则表达式验证邮箱和手机号的文章就介绍到这了,更多相关JS正则验证邮箱手机号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!