[element-ui] form的多個字段之間聯動驗證和取消驗證

字段: 去/返程日期(deptDate), 去/返程班次(flghtTrainSchedNo)

1. 頁面一進入時,都爲非必填項,
2. 邏輯出現必填的範圍只有飛機和火車,汽車和自駕沒有必填的驗證
3. 如果用戶操作了,其中一項,兩者都爲必填
4. 如果用戶刪除了一項且另一項無值時,變爲非必填
5. 如果先點擊了飛機或火車再去點擊汽車和自駕,則取消驗證必填項
6. 使用監聽觸發驗證和取消驗證

簡單的描述: 兩者一個有值時,驗證,都無值時不驗證

HTML片段

<div class="" v-for="(item,i) in form.tripTcktList" :key="'form.tripTcktList'+i">
	<div class="formlist">
	   <el-form-item :label="(item.roundTripInd ===1?'去':'返')+'程日期'"
	                  :prop="'tripTcktList.' + i + '.deptDate'"
	                  :rules="{ required: item.tripRequireStt, message: '日期不能爲空', trigger: 'blur' }"
	    >
	      <el-date-picker value-format="timestamp" v-model="item.deptDate" class="width-100-per" type="date"
	                      placeholder="選擇日期"></el-date-picker>
	    </el-form-item>
	    <el-form-item label="" prop=""></el-form-item>
	</div>
	<div class="formlist" v-if="item.tcktBoughtSttusCode==='16702'">
	    <el-form-item :label="(item.roundTripInd ===1?'去':'返')+'程班次'" class="inline-block"
	                  :prop="'tripTcktList.' + i + '.flghtTrainSchedNo'"
	                  :rules="{ required: item.tripRequireStt, message: '請填寫航班號/車次/自駕', trigger: 'blur' }"
	    >
	      <el-input v-model.trim="item.flghtTrainSchedNo" @keyup.native="transLetter('form.tripTcktList.' + i + '.flghtTrainSchedNo',i,item.roundTripInd ===1?'dept':'arvl',item,queryNo)" @blur="queryNo(i,item.roundTripInd ===1?'dept':'arvl',item)" placeholder="請填寫航班號/車次/自駕"></el-input>
	    </el-form-item>
	    <el-form-item label="" prop=""></el-form-item>
	</div> 
</div>              

注意的關鍵點: :rules="{ required: item.tripRequireStt, message: '請填寫航班號/車次/自駕', trigger: 'blur' }",這裏的item.tripRequireStt默認值時false

JS片段

  computed: {
    // 監聽出行信息的必填狀態
    judgeTripRequireStt(){
      return this.form.tripTcktList
    },
  },
  /**出行信息的狀態 - 深度監聽
     * idea:
     *  - 1. 只有自行購票時纔會觸發邏輯
     *  - 2. 只有在選擇16601、16602時，纔會去做判斷；反之狀態設置爲false
     */
  judgeTripRequireStt: {
    handler (n) {
      if(this.form.selfBuyTripTcktInd === 1){
        // 當選擇自行購票的時候  去程日期、去程班次、返程日期、返程班次都可以爲空
        // 但是如果選擇方式爲火車、飛機時，只要填了去程日期/返程日期，則去程班次/返程班次必填
        // 只要填了去程班次/返程班次，則去程日期/返程日期必填
        let isRequire = false
        n.forEach((item,i)=>{
          if(item.deptTrnsprtCode ==='16601' || item.deptTrnsprtCode ==='16602'){
            if(item.deptDate||item.flghtTrainSchedNo){
              item.tripRequireStt = true
            }else{
              item.tripRequireStt = false
            }
          }else{
            item.tripRequireStt = false
            this.$refs.form.clearValidate('tripTcktList.'+ i +'.flghtTrainSchedNo')
            this.$refs.form.clearValidate('tripTcktList.'+ i +'.deptDate')
          }
        })
      }
    },
    deep: true
  },

在這裏掉進過一個坑, 清楚字段驗證時要使用拼接的字段,而不是使用下標, 切記!!!