在项目的表单输入中,可能会遇到这种情况,我们需要限制一个最大最小值的范围。如
文本可范围:最小值:【】- 最大值:【】
这两个分别绑定了两个字段,拥有自己的校验方式,当最小值大于最大值时,两个都会报错。怎么让我们修改其中一项,就能够让两个表单都校验,而不需要我们再手动触发一下再校验呢?
解决方案如下
<el-form ref="limitCommit" :rules="numberLimit()" :model="numLimit" class="number-limit">
<el-form-item label="最小值" prop="limitLower">
<el-input type="number" v-model.trim.number="questionCommit.limitLower" @input="checkNumber('lower')" ></el-input>
</el-form-item>
<el-form-item label="最大值" prop="limitUpper">
<el-input type="number" v-model.trim.number="questionCommit.limitUpper" @input="checkNumber('upper')"></el-input>
</el-form-item>
</el-form>
这里用的是element组件,:rules绑定的校验方法如下:
numberLimit () {
return {
limitLower: [{
validator: (rule, value, cb) => {
const low = this.questionCommit.limitLower;
if ((low || low === 0) && (this.questionCommit.limitUpper || this.questionCommit.limitUpper === 0) && low > this.questionCommit.limitUpper) {
cb(new Error('最小分数值必须小于最大分数值!'));
}
cb();
},
trigger: ['blur', 'change']
}],
limitUpper: [{
validator: (rule, value, cb) => {
const upp = this.questionCommit.limitUpper;
if ((upp || upp === 0) && (this.questionCommit.limitLower || this.questionCommit.limitLower === 0) && upp < this.questionCommit.limitLower) {
cb(new Error('最大分数值必须大于最小分数值!'));
}
cb();
},
trigger: ['blur', 'change']
}]
};
},
给两个项目绑定input事件,在checkNumber函数中,主动去触发校验:
checkNumber (type) {
if (type === 'lower') {
this.$refs.limitCommit.validateField('limitUpper');
} else {
this.$refs.limitCommit.validateField('limitLower');
}
},
这样在一个输入之后,两个都会校验,之前的报错信息就会同步更新了。