elementUI 表单验证-联动型校验

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

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

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

<template>
<el-formref="disreguInfo"size="mini":model="disreguInfo":rules="rules"label-width="130px":inline="true"label-position="top"
><el-form-item label="事故发生路路口" prop="intersection" class="select"><el-autocompletev-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-optionv-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-optionv-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、前一个表单项选了某个值之后，第二个表单项必填校验

<template>
<el-formref="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-optionv-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-optionv-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、一个表单项里面有两个输入框进行必填校验

<template>
<el-formref="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、六个表单项至少必填一项

<template>
<el-formref="disreguInfo"size="mini":model="disreguInfo":rules="rules"label-width="130px":inline="true"label-position="top"
><el-form-item label="事故发生路路口" prop="intersection" class="select"><el-autocompletev-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.disreguInfoif (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>

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