elementUI 表单验证-联动型校验

由于项目涉及到很多表单项，不是简单的必填验证，有时候需要两三个表单项联合一起校验，防止以后忘记，记录在此巩固一下

1、前一个表单项填了之后，第二个表单项需要进行必填校验

如下表单，事故发生路路口未填的时候，路口类型及交通信号灯是禁用状态，当填了值之后，后面表单箱就需要进行必填校验

javascript 复制代码

<template>
<el-form
  ref="disreguInfo"
  size="mini"
  :model="disreguInfo"
  :rules="rules"
  label-width="130px"
  :inline="true"
  label-position="top"
>
            <el-form-item label="事故发生路路口" prop="intersection" class="select">
                <el-autocomplete
                  v-model="disreguInfo.intersection"
                  :fetch-suggestions="remoteIntersection"
                  value-key="name"
                  placeholder="请输入关键词"
                  @input="handleIntersectionChange"
                />
            </el-form-item>
            <el-form-item label="路口类型" prop="intersection_type" class="select">
                <el-select v-model="disreguInfo.intersection_type" :disabled="!disreguInfo.intersection" class="select">
                  <el-option
                    v-for="item in intersectionTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
            </el-form-item>
            <el-form-item label="交通信号灯" prop="traffic_light" class="select">
                <el-select v-model="disreguInfo.traffic_light" :disabled="!disreguInfo.intersection" class="select">
                  <el-option
                    v-for="item in trafficLightOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
            </el-form-item>
</el-form>
</template>
<script>
export default {
  data() {
    const validateIntersectionType = (rule, value, callback) => {
      if (this.disreguInfo.intersection) {
        if (value) {
          callback()
        } else {
          callback(new Error('请输入路口类型'))
        }
      } else {
        callback()
      }
    }
    const validateTrafficLight = (rule, value, callback) => {
      if (this.disreguInfo.intersection) {
        if (value) {
          callback()
        } else {
          callback(new Error('请选择交通信号灯'))
        }
      } else {
        callback()
      }
    }
    
    return {
        rules: {
            intersection_type: [
              { validator: validateIntersectionType, trigger: 'change' }
            ],
            traffic_light: [
              { validator: validateTrafficLight, trigger: 'change' }
            ],
        }
    }
  }
}
</script>

2、前一个表单项选了某个值之后，第二个表单项必填校验

javascript 复制代码

<template>
<el-form
  ref="disreguInfo"
  size="mini"
  :model="disreguInfo"
  :rules="rules"
  label-width="130px"
  :inline="true"
  label-position="top"
>
            <el-form-item label="工作/休息日" prop="occur_day_type" class="select">
              <el-select v-model="disreguInfo.occur_day_type" class="select" @change="isHolidayChange">
                <el-option
                  v-for="item in isHolidayOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="节假日" prop="occur_holiday" class="select">
              <el-select v-model="disreguInfo.occur_holiday" :disabled="disreguInfo.occur_day_type !== '1003'" class="select">
                <el-option
                  v-for="item in holidayOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
</el-form>
</template>
<script>
export default {
  data() {
    const validateHoliday = (rule, value, callback) => {
      if (this.disreguInfo.occur_day_type === '1003') {
        if (value) {
          callback()
        } else {
          callback(new Error('请选择节假日'))
        }
      } else {
        callback()
      }
    }
    
    return {
        rules: {
            occur_holiday: [
              { validator: validateHoliday, trigger: 'change' }
            ]
        }
    }
  }
}
</script>

3、一个表单项里面有两个输入框进行必填校验

javascript 复制代码

<template>
<el-form
  ref="disreguInfo"
  size="mini"
  :model="disreguInfo"
  :rules="rules"
  label-width="130px"
  :inline="true"
  label-position="top"
>
           <el-form-item label="事故发生第几圈" prop="occur_laps" class="select">
              <el-input v-model="disreguInfo.occur_laps" class="half-ipt" clearable @keyup.native="(disreguInfo.occur_laps = disreguInfo.occur_laps.replace(/[^\d]/g, ''))" />
              <span style="margin: 0 6px;color: #686868;">/</span>
              <el-input v-model="disreguInfo.total_laps" v-limit class="half-ipt" clearable @keyup.native="(disreguInfo.total_laps = disreguInfo.total_laps.replace(/[^\d]/g, ''))" />
              <span style="margin: 0 6px;color: #686868;">=</span>
              <el-input v-model="occurLapRate" disabled class="half-ipt" clearable />
              <span style="margin-left: 6px;color: #686868;">%</span>
            </el-form-item>
</el-form>
</template>
<script>
export default {
  data() {
    const validateLaps = (rule, value, callback) => {
      if (!this.disreguInfo.occur_laps && !this.disreguInfo.total_laps) {
        callback(new Error('请填写事故发生圈数和总圈数'))
      } else if (!this.disreguInfo.occur_laps) {
        callback(new Error('请输入事故发生圈数'))
      } else if (!this.disreguInfo.total_laps) {
        callback(new Error('请输入总圈数'))
      } else if (parseInt(this.disreguInfo.occur_laps) > parseInt(this.disreguInfo.total_laps)) {
        callback(new Error('事故发生圈数不能大于总圈数'))
      } else {
        callback()
      }
    }
    
    return {
        rules: {
            occur_laps: [
              { validator: validateLaps, trigger: 'blur' }
            ]
        }
    }
  }
}
</script>

4、六个表单项至少必填一项

javascript 复制代码

<template>
<el-form
  ref="disreguInfo"
  size="mini"
  :model="disreguInfo"
  :rules="rules"
  label-width="130px"
  :inline="true"
  label-position="top"
>
              <el-form-item label="事故发生路路口" prop="intersection" class="select">
                <el-autocomplete
                  v-model="disreguInfo.intersection"
                  :fetch-suggestions="remoteIntersection"
                  value-key="name"
                  placeholder="请输入关键词"
                  @input="handleIntersectionChange"
                />
              </el-form-item>
              <el-form-item label="站点" prop="station" class="select">
                <el-input v-model="disreguInfo.station" clearable @input="handleStationChange" />
              </el-form-item>
              <el-form-item label="门牌号" prop="door_plate" class="select">
                <el-input v-model="disreguInfo.door_plate" clearable />
              </el-form-item>
              <el-form-item label="停车场" prop="park" class="select">
                <el-input v-model="disreguInfo.park" clearable />
              </el-form-item>
              <el-form-item label="中心站" prop="central_station" class="select">
                <el-input v-model="disreguInfo.central_station" clearable />
              </el-form-item>
              <el-form-item label="路备注" prop="road_remark" class="select">
                <el-input v-model="disreguInfo.road_remark" clearable />
              </el-form-item>
</el-form>
</template>
<script>
export default {
  data() {
    const validateAtLeastOne = (rule, value, callback) => {
      const {
        intersection,
        station,
        door_plate,
        park,
        central_station,
        road_remark
      } = this.disreguInfo

      if (intersection || station || door_plate || park || central_station || road_remark) {
        callback()
      } else {
        callback(new Error('事故发生路路口、站点、门牌号、停车场、中心站、路备注至少输入一项'))
      }
    }
    
    return {
        rules: {
            intersection: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
            station: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
            door_plate: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
            park: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
            central_station: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
            road_remark: [
              { validator: validateAtLeastOne, trigger: 'blur' }
            ],
        }
    }
  }
}
</script>

先记录这四个吧，后面遇到其他的验证，再汇总