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')
},