VUE+ elementui 表单rules validator 邮箱验证、电话号码验证、身份证验证、账号验证

export default{

   data(){
    // 身份证验证
    const checkIDCard = (rule, value, callback) => {
      const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
      // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (value) {
        if (IDCardReg.test(value)) {
          callback()
        } else {
          callback(new Error(\'身份证号格式不正确\'))
        }
      } else {
        callback(new Error(\'请输入身份证号\'))
      }
    }

    // 设置手机号的验证规则
    const phone = (rule, value, callback) => {
      if (!value) {
        callback(new Error(\'请输入联系方式\'))
      } else {
        const reg = /^1[3|4|5|6|7|8|9]\d{9}$/
      // const phoneReg = /^1[34578]\d{9}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error(\'请输入正确的电话\'))
        }
      }
    }
    // 邮箱
    var email = (rule, value, callback) => {
      const mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
    // const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (rule.required && !value) {
        return callback(new Error(\'不能为空\'))
      }
      if (value) {
        if (!(mal.test(value))) {
          callback(new Error(\'请输入正确邮箱\'))
        } else {
          callback()
        }
      }
    }

      // 用户账号验证

    var validateyhzh = (rule, value, callback) => {
      const yhzhreg = /^[a-z][a-z\d_]{3,19}$/
      if (!yhzhreg.test(value)) {
        callback(new Error(\'英文、下划线、数字，第一个字母不能是下划线和数字\'))
      } else {
        this.api.get(this, \'check_msg\', (data) => {
          if (data.length !== 0) {
            callback(new Error(\'账号已存在请重新输入\'))
          } else {
            callback()
          }
        }, { yhzh: value })
      }
    }      
  return{
         rules: {
              yx: { required: true, validator: email, trigger: \'blur\' },
              dh: { required: false, validator: checkIDCard, trigger: \'blur\' },
              sfzh: { required: false, validator: phone, trigger: \'blur\' }
          } 
       }   
    }

}```

html

<el-form :model="form"  label-position="right" :rules="rules" label-width="200px"  :inline="true" ref="dataForm"></el-form>

提交验证

      this.$refs.dataForm.validate(valid => {
        if (!valid) {
          me.$message({
            message: \'完善信息\',
            type: \'warning\'
          })
          return false
        } 
      }