最新JS正则表达式验证邮箱和手机号实例(2022)

 更新时间:2022年08月04日 11:58:21   作者: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正则验证邮箱手机号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于JavaScript制作一个简单的天气应用

    基于JavaScript制作一个简单的天气应用

    随着Web开发技术的不断发展,JavaScript已经成为前端开发中不可或缺的一部分,下面我们就来看看如何使用JavaScript实现一个简单的天气应用吧
    2024-01-01
  • 七个基于JavaScript实现的情人节表白特效

    七个基于JavaScript实现的情人节表白特效

    情人节将至 程序员证明自己不是直男的时候到啦 我们也有自己的专属代码浪漫。本文将介绍七个利用JavaScript实现的情人节表白特效,需要的可以参考一下
    2022-01-01
  • Bootstrap中datetimepicker使用小结

    Bootstrap中datetimepicker使用小结

    这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法,一款功能强大的日期选择控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS中多层次排序算法的实现代码

    JS中多层次排序算法的实现代码

    这篇文章主要给大家介绍了关于JS中多层次排序算法的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 巧用canvas

    巧用canvas

    作为一项有意思的新技术,canvas给我们带来了对网页绘图和网页动画的新革命。本文简单介绍下canvas实用的功能,下面跟着小编一起来看下吧
    2017-01-01
  • js验证整数加保留小数点的简单实例

    js验证整数加保留小数点的简单实例

    这篇文章主要介绍了js验证整数加保留小数点的简单实例,有需要的朋友可以参考一下
    2013-12-12
  • 纯JS前端实现分页代码

    纯JS前端实现分页代码

    这篇文章主要介绍了纯JS前端实现分页代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Javascript延迟执行实现方法(setTimeout)

    Javascript延迟执行实现方法(setTimeout)

    延迟执行,其实就是用到了setTimeout这个函数。善于利用这个函数,可以减少很多ajax的请求,以及dom操作。
    2010-12-12
  • 一文带你深入理解JavaScript模板引擎

    一文带你深入理解JavaScript模板引擎

    在Web前端开发中,需要将数据动态渲染到页面上,随着应用程序的复杂度增加,数据渲染的逻辑也变得越来越复杂,这时候就需要使用模板引擎来帮助我们动态生成HTML标记,本文将深入介绍 JavaScript 模板引擎,帮助读者更好地理解和应用模板引擎
    2023-06-06
  • ES6 javascript的异步操作实例详解

    ES6 javascript的异步操作实例详解

    这篇文章主要介绍了ES6 javascript的异步操作,结合实例形式分析了ES5中异步操作的概念、原理、使用方法及相关注意事项,需要的朋友可以参考下
    2017-10-10

最新评论