Element-UI表单验证 二选一、多选一验证

Element-UI表单验证二选一验证

在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证

template

<el-row v-else>
  <el-col :span="8">
    <el-form-item label="账户ID" prop="acctId">
      <el-input v-model="publicForm.acctId" style="margin-right: 0.625rem;" @input="clearRule()">
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item label="用户ID" prop="userId">
      <el-input v-model="publicForm.userId" style="margin-right: 0.625rem;" @input="clearRule()"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item label="号码" prop="number">
      <el-input v-model="publicForm.number" style="margin-right: 0.625rem;" @input="clearRule()"></el-input>
    </el-form-item>
  </el-col>
</el-row>

类定义

publicForm: {
  acctId: '',
  userId: '',
  number: '',
},
publicRule: {
  acctId: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
  userId: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
  number: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
},

类方法

validateNum (rule, value, callback) {
  if (!this.publicForm.acctId && !this.publicForm.userId && !this.publicForm.number) {
    callback(new Error('账户ID,用户ID,号码,请至少填写一项'))
  } else {
    callback()
  }
},
clearRule () {
  this.$refs.publicForm.clearValidate('acctId')
  this.$refs.publicForm.clearValidate('userId')
  this.$refs.publicForm.clearValidate('number')
},