鍍金池/ 問答/HTML/ element-ui中有關(guān)聯(lián)邏輯關(guān)系的表單校驗(yàn)

element-ui中有關(guān)聯(lián)邏輯關(guān)系的表單校驗(yàn)

具體的UI展示如下：

clipboard.png

數(shù)據(jù)格式為：

data: [
    { label: '順豐', value: '' },
    { label: '韻達(dá)', value: '' },
    { label: '圓通', value: '' },
    // ...動態(tài)數(shù)據(jù)，可能還有更多
]

校驗(yàn)規(guī)則及顯示：

  1. 必填校驗(yàn)；否則標(biāo)紅對應(yīng)輸入框，并在對應(yīng)輸入框下顯示'請輸入單量比例'
  2. 格式校驗(yàn)；比例值必須是大于0的數(shù)字類型，否則標(biāo)紅對應(yīng)輸入框，在對應(yīng)的輸入框下顯示‘輸入值必須為正數(shù)’
  3. 關(guān)聯(lián)交驗(yàn)：各個單量比例之和必須為100，否則標(biāo)紅所有輸入框，并在所有輸入框下顯示'比例之和必須為100%'

前兩個沒有關(guān)聯(lián)邏輯的校驗(yàn)element-ui中有提供，但是關(guān)聯(lián)關(guān)系的邏輯沒什么思路，勞煩大牛有方法的提供一下具體的思路（最好能貼出代碼），萬分感謝！

采用一樓的方式只能校驗(yàn)當(dāng)前項(xiàng)是否滿足，無法將前面填寫的置為合法
clipboard.png

回答
編輯回答
巴扎嘿

利用validator定義自己的驗(yàn)證規(guī)則，偽代碼如下。

    [
        { 規(guī)則1... },
        { 規(guī)則2... },
        {
            validator: function(rule, value, callback) {

                sum(this.data) === 100 ? callback() : callback(new Error("比例之和必須為100%"));
            },
            trigger: 'blur'
        }
    ]
2017年2月8日 09:50
編輯回答
魚梓

折騰了這么久，終于弄出來了，主要問題是：當(dāng)校驗(yàn)條件滿足時，需要重新校驗(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: '請輸入單量比例', 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;
  });
},
2017年6月28日 13:04