vue + element 检验开始时间与结束时间

 vue中使用element-ui后，设置开始时间不能大于结束时间（自定义规则校验）

•  template部分

  <el-form-item label="开始日期"
                prop="startTime">
    <el-date-picker v-model="formData.startTime"
                    type="datetime"
                    format='yyyy-MM-dd HH:mm'
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="开始日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="结束日期"
                prop="endTime">
    <el-date-picker v-model="formData.endTime"
                    type="datetime"
                    format='yyyy-MM-dd HH:mm'
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="结束日期">
    </el-date-picker>
  </el-form-item>

• 校验部分

data(){
       let validateStartTime = (rule, value, callback) => {
        if (!value) {
            callback(new Error("起始日期不能为空"));
        } else {
            // 如果结束日期没选
            if (!this.formData.endTime) {
                callback();
            } else {
                // 结束日期有进行判断
                if (this.compareDate(value, this.formData.endTime)) {
                    // 如果起始在结束之前
                    callback();
                } else {
                    callback(new Error("起始日期不能再结束日期之后，请重新选择"));
                }
            }
        }
    };
    let validateEndTime = (rule, value, callback) => {
        if (!value) {
            callback(new Error("结束日期不能为空"));
        } else {
            if (!this.formData.startTime) {
                callback();
            } else {
                // 起始日期有
                if (this.compareDate(this.formData.startTime, value)) {
                    callback();
                } else {
                    callback(new Error("结束日期不能在起始日期前，请重新选择"));
                }
            }
        }
    };
    rules: {
      startTime: [
        {
          trigger: ["blur"],
          validator: validateStartTime,
        },
      ],
      endTime: [
        {
          trigger: ["blur"],
          validator: validateEndTime,
        },
      ],
    },
},
methods:{
    // 比较两个日期
    compareDate(start, end) {
      return new Date(end).getTime() > new Date(start).getTime();
    },
}