element-plus的form组件校验联动

1.问题背景

el-dialog新增弹窗里面有两个时间控件el-date-picker,开始时间和结束时间,测试要求开始时间小于结束时间,当选择的结束时间小于开始时间时,需要在控件上提示“结束时间不能早于开始时间”

2.问题分析

很明显,我们需要在el-form的rules里面添加对时间的校验,当选择结束时间时,需要比较开始时间的时间戳和结束时间的时间戳大小;

3.代码

<el-dialog title="领料监管" :visible.sync="dialogVisible" width="60%">
    <el-form label-position="right" label-width="180px" :model="vm" size="default" :rules="rules" ref="typeAddForm" class="type-add-from">
        <el-row>
            <el-col :span="20">
                <el-form-item label="开始时间：" prop="listingTime">
                    <el-date-picker
                    v-model="vm.listingTime"
                    type="datetime"
                    placeholder="请选择时间"
                    value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="20" v-if="vm.transStatus === '已成交'">
                <el-form-item label="结束时间：" prop="transTime">
                    <el-date-picker
                    v-model="vm.transTime"
                    type="datetime"
                    placeholder="请选择时间"
                    value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</el-dialog>

<script setup>
const vm=ref()
const typeAddForm=ref()
conbst rules=reactive({
    startTime: [
        { required: true, message: '请选择开始时间', trigger: 'blur' },
        {
            validator: (rule, value, cb) => {
                if (vm.value.endTime) {
                    let endTimeStamp = new Date(vm.value.endTime);
                    let startTimeStamp = new Date(value);
                    f (startTimeStamp.getTime() < endTimeStamp.getTime()) {
                        cb(new Error('开始时间不能晚于结束时间'));
                    }
                    return cb();
                }
            },
        },
    ],
    endTime: [
        { required: true, message: '请选择结束时间', trigger: 'blur' },
            {
                validator: (rule, value, cb) => {
                if (vm.value.startTime) {
                    let endTimeStamp = new Date(value);
                    let startTimeStamp = new Date(vm.value.startTime);
                    if (startTimeStamp.getTime() < endTimeStamp.getTime()) {
                        cb(new Error('结束时间不能早于开始时间'));
                    }
                    return cb();
                }
            },
        },
    ],
})
</script>

4.注意点

应对的情况是,先选开始时间比如2024-12-18,然后选结束时间2024-12-17,这时候校验提示出现在结束时间下面,然后我们修改开始时间2024-12-16,这时候明明通过校验了,但是结束时间的提示没有删除. 所以在对开始时间进行校验的时候,当校验通过的时候,需要对结束时间的校验提示进行清除,代码就是

<script setup>
const vm=ref()
const typeAddForm=ref()
conbst rules=reactive({
    startTime: [
        { required: true, message: '请选择开始时间', trigger: 'blur' },
        {
            validator: (rule, value, cb) => {
                if (vm.value.endTime) {
                    let endTimeStamp = new Date(vm.value.endTime);
                    let startTimeStamp = new Date(value);
                    f (startTimeStamp.getTime() < endTimeStamp.getTime()) {
                        cb(new Error('开始时间不能晚于结束时间'));
                    }
                    typeAddForm.value.clearValidate('endTime')
                    return cb();
                }
            },
        },
    ],
    endTime: [
        { required: true, message: '请选择结束时间', trigger: 'blur' },
            {
                validator: (rule, value, cb) => {
                if (vm.value.startTime) {
                    let endTimeStamp = new Date(value);
                    let startTimeStamp = new Date(vm.value.startTime);
                    if (startTimeStamp.getTime() < endTimeStamp.getTime()) {
                        cb(new Error('结束时间不能早于开始时间'));
                    }
                    typeAddForm.value.clearValidate('startTime')
                    return cb();
                }
            },
        },
    ],
})
</script>