最新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正则验证邮箱手机号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现二级导航功能

    js实现二级导航功能

    本文主要介绍了js实现二级导航功能的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Javascript拓展String方法小结

    Javascript拓展String方法小结

    拓展了几个常用的方法,需要的朋友可以参考下
    2013-07-07
  • dotopAlert 提示用户需安装播放器的代码

    dotopAlert 提示用户需安装播放器的代码

    dotopAlert 提示用户需安装播放器的代码,多用于电影站推广某些播放器
    2012-09-09
  • 利用原生JS与jQuery实现数字线性变化的动画

    利用原生JS与jQuery实现数字线性变化的动画

    最近在工作中遇到一个需要,需要将数字实现递增的动态显示,从网上找了相关的资料发现利用原生JS与jQuery都可以实现,suoyi8下面这篇文章主要给大家介绍了利用原生JS与jQuery实现数字线性变化动画的相关资料,需要的朋友可以参考下。
    2017-02-02
  • js实现常用排序算法

    js实现常用排序算法

    这篇文章主要为大家详细介绍了js实现常用排序算法的代码,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 原生JS实现多条件筛选

    原生JS实现多条件筛选

    这篇文章主要为大家详细介绍了原生JS实现多条件筛选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS防抖和节流实例解析

    JS防抖和节流实例解析

    这篇文章主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • javascript框架设计读书笔记之模块加载系统

    javascript框架设计读书笔记之模块加载系统

    本文是司徒正美的《javascript框架设计》的第二章模块加载系统的读书笔记,根据自己的理解,简要的跟大家讲述了本章的主要内容,方便大家更好的学习。
    2014-12-12
  • Javascript-Mozilla和IE中的一个函数直接量的问题

    Javascript-Mozilla和IE中的一个函数直接量的问题

    Javascript-Mozilla和IE中的一个函数直接量的问题...
    2007-01-01
  • JS 跳转页面延迟2种方法

    JS 跳转页面延迟2种方法

    js跳转页面想必大家不会很陌生吧,在浏览页面的时候经常会碰到这种现象存在如果可以延迟的话是不是会更委婉一点呢,接下来为大家介绍下如何实现,感兴趣的朋友可以参考下哈
    2013-03-03

最新评论