[element-ui] form的多个字段之间联动验证和取消验证

最新推荐文章于 2024-08-13 00:11:49 发布

AlexKain

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：日常学习和储备[暂存区] 文章标签： vue.js 前端 ElementUi 联动验证

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/106387909

element-ui 同时被 3 个专栏收录

28 篇文章

订阅专栏

日常学习和储备[暂存区]

24 篇文章

订阅专栏

基础知识

3 篇文章

订阅专栏

本文介绍了在Vue.js项目中，利用ElementUI进行表单验证时，如何实现去/返程日期(deptDate)和去/返程班次(flghtTrainSchedNo)之间的联动。当用户选择飞机或火车时，这两项变为必填；若用户清除其中一项且另一项无值，则取消必填；同时提到了在取消验证时需要注意的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面一进入时,都为非必填项,
逻辑出现必填的范围只有飞机和火车,汽车和自驾没有必填的验证
如果用户操作了,其中一项,两者都为必填
如果用户删除了一项且另一项无值时,变为非必填
如果先点击了飞机或火车再去点击汽车和自驾,则取消验证必填项
使用监听触发验证和取消验证

简单的描述: 两者一个有值时,验证,都无值时不验证
在这里插入图片描述

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
  },

在这里掉进过一个坑, 清楚字段验证时要使用拼接的字段,而不是使用下标, 切记!!!