项目中常用正则匹配验证

作者: bkbtp 分类: 前端 发布时间: 2018-06-24 15:32

vue的项目里,无论是采用iview还是elementui,Form组件中表单验证都是使用的 async-validator 实现的数据验证。
本文中验证规则写法也是基于此的自定义写法,其他地方使用,参考核心正则即可。

账号5-15位数字或大小写字母

const validateUsername = (rule, value, callback) => {
  if (value) {
    if (!/^[a-zA-Z0-9]{5,15}$/.test(value)) {
      callback(new Error('请输入5-15位数字或大小写字母'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

密码8-15位,同时包含大小写字母和数字

const validatePassword = (rule, value, callback) => {
  if (value) {
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,15}$/.test(value)) {
      callback(new Error('8-15位,必填同时包含大小写字母和数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

验证邮箱格式

const validateEmail = (rule, value, callback) => {
  if (value) {
    if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
      callback(new Error('电子邮件格式错误'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

验证身份证号

const validateIdCard = (rule, value, callback) => {
  if (value) {
    if (!/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(value)) {
      callback(new Error('请正确输入身份证号'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。