2 回答

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
折騰了這么久,終于弄出來(lái)了,主要問(wèn)題是:當(dāng)校驗(yàn)條件滿足時(shí),需要重新校驗(yàn)所有表單的合理性
<el-form :model="ruleForm" ref="form">
<div v-for="(item, index) in ruleForm.proportion" :key="index">
<el-form-item class="left label"
:label="`${item.label}:`"
:rules="rule"
:prop="'proportion.' + index + '.value'">
<el-input v-model.number="item.value"></el-input>%
</el-form-item>
</div>
</el-form>
// created初始化
this.rule = [
{ required: true, message: '請(qǐng)輸入單量比例', trigger: 'blur' },
{ type: 'integer', min: 1, max: 100, message: '輸入值必須介于1至100', trigger: 'blur' },
{ validator: this.checkSum, trigger: 'blur' },
];
// methods方法
checkSum(rule, value, callback) {
let sum = 0;
this.items.forEach((item) => {
sum += item.value;
});
if (sum !== 100) {
this.isLegal = false;
callback(new Error('比例之和必須為100%'));
} else {
this.isLegal = true;
callback();
}
},
// watch監(jiān)控
isLegal() {
this.$refs.form.validate((validate) => {
this.isLegal = validate;
});
},

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
利用validator定義自己的驗(yàn)證規(guī)則,偽代碼如下。
[
{ 規(guī)則1... },
{ 規(guī)則2... },
{
validator: function(rule, value, callback) {
sum(this.data) === 100 ? callback() : callback(new Error("比例之和必須為100%"));
},
trigger: 'blur'
}
]
添加回答
舉報(bào)