經常遇到一個問題：
- 存在2個表單
- 一個必須比另外一個小
處理方式：
- 如果存在2個這樣的表單，我們可以直接在提交時候判斷一下，如果通過就提交，不通過就mesage提示，然後return中斷後續代碼
- 使用element自帶的自定義校驗方式validator，在validator函數裏面互相校驗，但是這存在一個很致命的問題，死循環，一直都沒找到好的方式。它的代碼可能如下:
data(){
rules: {
maxMoney: [
{ required: true, message: "請輸入購買最高值", trigger: 'blur' },
{ validator: this.validMax, trigger: 'blur' },
],
maxMoney: [
{ required: true, message: "請輸入購買最低值", trigger: 'blur' },
{ validator: this.validMini , trigger: 'blur' },
],
],
},
methods: {
validMax (rule, value, callback) {
if (this.form.minMoney > value) {
callback(new Error('請輸入高於購買最低值的數字'));
this.$refs['form'].validateField('minMoney') //會導致死循環
}
else {
callback();
}
},
validMini (rule, value, callback) {
if (this.form.maxMoney < value) {
callback(new Error("請輸入小於購買最高值的數字"))
this.$refs['form'].validateField('maxMoney') //會導致死循環
}
else {
callback();
}
},
}
上面代碼因爲每次校驗其中一個有問題時候都會觸發另外一個表單校驗，這回導致無限循環直接卡死瀏覽器。
很長一段時間都沒有搞明白怎麼處理。
如果觸發另外一個表單的循環但是，卻不會導致死循環呢？？~！@！！@#￥！@￥￥@#￥
其實，不難，只是裝牛角尖了。。
思路如下：
- 當前表單失去焦點，觸發另外一個表單的校驗，但是另外一個表單的校驗不會再次校驗當前表單
- 解決
代碼如下:
<div>
<el-form-item label="單次購買限額低/高"
prop="minMoney"
style="display:inline-block;">
<el-input v-model="form.minMoney"
style="width:195px;"
@blur="()=>this.$refs['form'].validateField('maxMoney')"
placeholder="請輸入購買最低值:"></el-input>
</el-form-item>
<el-form-item label=""
label-width="0px"
prop="maxMoney"
style="display:inline-block; margin-left:10px;">
<el-input v-model="form.maxMoney"
style="width:195px;"
class="page-input"
@blur="()=>this.$refs['form'].validateField('minMoney')"
placeholder="請輸入購買最高值"></el-input>
</el-form-item>
</div>
這是一種解決思路，不僅僅針對element-ui 框架！！！
現在就不擔心存在多少個這種檢驗了，so easy。happy ending....^_^