vue表单验证时间

要求：到期时间不能小于开始时间，时间为空，列表显示无期限

数据类型建议是使用String

1.添加vue表单控件----------自定义校验表单

<el-form-item
          label="开始时间"
          :label-width="formLabelWidth"
          prop="createTime"
        >
          <el-date-picker
            v-model="form.createTime"
            type="datetime"
            placeholder="选择日期时间
            "
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="结束时间"
          prop="endTime"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

2.datjioa中写入自定义校验内容

var validateTime = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入日期"));
      } else {
        callback();
      }
    };
    var validateTime2 = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else if (
        new Date(value).getTime() < new Date(this.form.createTime).getTime()
      ) {
        callback(new Error("开始日期不能晚于结束日期"));
      } else {
        callback();
      }
    };

3.rule校验

rules: {
        createTime: [{ validator: validateTime, trigger: "blur" }],
        endTime: [{ validator: validateTime2, trigger: "blur" }],
      },

3.之后就可以进行添加操作了