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