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][0-9]d{8}$/
      // 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-zd_]{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
        } 
      }