vue2自定义表单验证： 选择时间A和时间B对比，当选择的时间A小于时间B则表单rules验证不通过

实现效果：

代码实现

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="时间A" prop="timeA">
      <el-time-picker v-model="form.timeA" placeholder="选择时间"></el-time-picker>
    </el-form-item>
    <el-form-item label="时间B" prop="timeB">
      <el-time-picker v-model="form.timeB" placeholder="选择时间"></el-time-picker>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

 form: {
          timeA: '',
          timeB: ''
        },
        rules: {
          timeA: [
            { required: true, message: '请选择时间A', trigger: 'change' }
          ],
          timeB: [
            { required: true, message: '请选择时间B', trigger: 'change' },
            { validator: this.validateTimeB, trigger: 'change' }
          ]
        }

  // 对比时间
   isABeforeB(dateA, dateB) {
      const dateATime = new Date(dateA).getTime();
      const dateBTime = new Date(dateB).getTime();
      return dateATime > dateBTime;
    },
    validateTime(rule, value, callback) {
      if (this.form.timeB && value) {
         if(this.form.timeB && !this.isABeforeB(value, this.form.timeB)){
            callback(new Error(`时间A必须小于或等于时间B`));
          } else {
            callback();
          }
        } else {
          callback();
        }
      },
    
    submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            alert('表单验证通过！');
          } else {
            alert('表单验证失败！');
            return false;
          }
        });
      }