在項目的表單輸入中,可能會遇到這種情況,我們需要限制一個最大最小值的範圍。如
文本可範圍:最小值:【】- 最大值:【】
這兩個分別綁定了兩個字段,擁有自己的校驗方式,當最小值大於最大值時,兩個都會報錯。怎麼讓我們修改其中一項,就能夠讓兩個表單都校驗,而不需要我們再手動觸發一下再校驗呢?
解決方案如下
<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');
}
},
這樣在一個輸入之後,兩個都會校驗,之前的報錯信息就會同步更新了。