JavaScript 正则表达式验证邮箱与手机号完整示例

邮箱正则表达式验证

实现邮箱格式校验时，可使用如下正则表达式：

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' }
        ]
      }
    }
  }

当输入不符合上述规则时，系统应提示非法格式。

若符合规则，则判定为合法输入。

在表单验证库中，除了自定义校验函数外，还可以直接使用pattern属性进行匹配。

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)
}

总结

以上即为JavaScript中正则表达式验证邮箱和手机号的完整实现方案。如需了解更多相关验证技巧，可查阅往期文章或关注后续更新内容，感谢支持。