vue 中多个表单元素控一个校验规则

1. 场景一

 

<el-form-item
    label="确认时长方式"
    prop="preSubResourceDurationDay"
>
    <div class="confirmDurationDay">
        最晚使用日期前
        <el-input-number
            v-model="form.preSubResourceDurationDay"
            :precision="0"
            class="dayInputNumber"
            controls-position="right"
            :min="0"
        ></el-input-number>
        天
        <el-time-picker
            v-model="form.preSubResourceDurationTime"
            class="timePicker"
            value-format="HH:mm"
            :format="'HH:mm'"
            :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
            @change="handlerPreDurationDayChange"
        ></el-time-picker>
        之前确认，
        <span style="font-weight: bold">超时不确认将自动取消订单！</span>
    </div>
</el-form-item>

第一个输入框的校验规则：

preDurationDay: [
    {
        required: true,
        trigger: ["blur", "change"],
        validator: (rule, value, callback) => {
            // 具体规则....
            let inputMinite = (this.form.preSubResourceDurationDay + 1) * 24 * 60 - 1 - this.convertTimeToMinutes(this.form.preSubResourceDurationTime);
            if (inputMinite > 0 && inputMinite < this.lastMinite) {
                callback();
            } else {
                callback(new Error("最晚确认时长，已超过提前预订天数，请重新设置最晚确认时长！"));
            }
        },
    },
],

第二个输入框触发第一个输入框的校验：

handlerPreDurationDayChange() {
    this.$refs.form.validateField("preSubResourceDurationDay");
},

2. 场景二

① 

② 

像这种，两边控制一个校验规则，只需要一边输入完，就通过校验的场景，在场景一的基础上，再去在自定义规则中定义自定义属性来实现：

:rules="[
    {
        required: true,
        validator: validatorCostAmount,
        otherValidator: () => item.advanceReservation,  // checkbox 绑定的值
        trigger: ['blur', 'change'],
    },
]"

data 中定义：

validatorCostAmount: (rule, value, callback) => {
    if (rule.otherValidator() == 20 || value >= 0) {
        callback();
    } else {
        callback(new Error("请输入费用或勾选需客人自行预约"));
    }
},

最后再去页面上 checkbox 的地方绑定一个 change 事件，去触发左边的校验即可。