element ui+vue结束时间不能小于开始时间校验

一个开始时间，一个结束时间，理论上开始时间是不能大于结束时间的，所以在前台进行表单提交时，需要对其进行验证,保证数据正确性.

form表单的绑值：

​​​​<el-form-item  :rules="rules" label="生效日期">
            <div class="flex">
              <el-form-item prop="startTime" >
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  size="medium "
                  placeholder="请选择开始日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item prop="endTime" >
                <el-date-picker
                  v-model="form.endTime"
                  size="medium"
                  type="datetime"
                  placeholder="请选择结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>
  </el-form-item>

 在data里定义两个变量做判断：
 

// 定义两个变量
    const startTime = (rules, value, callback) => {
      if (!value) {
        callback(new Error('请选择开始时间'))
      } else {
        if (this.form.endTime) {
          this.$refs.form.validateField('endTime')
        }
        callback()
      }
    }
    const endTime = (rules, value, callback) => {
      if (!value) {
        callback(new Error('请选择结束时间'))
      } else {
        if (!this.form.startTime) {
          callback(new Error('请选择开始时间！'))
        } else if (Date.parse(this.form.startTime) >= Date.parse(value)) {
          callback(new Error('结束时间必须大于开始时间！'))
        } else {
          callback()
        }
      }
    }

 在return写检验规则：

// 检验规则
      rules: {
        startTime: [{
          required: true,
          validator: startTime,
          trigger: 'blur'
        }],
        endTime: [{
          required: true,
          validator: endTime,
          trigger: 'blur'
        }]
      }

 form表单的rules绑定：:rules="rules"

原文链接：https://blog.csdn.net/weixin_48931415/article/details/123045539