element-ui时间组件的表单验证,不能为空,结束时间必须大于开始时间

一、template里的代码

<el-form-item label="会议开始时间" prop="startTime">
                <el-date-picker :disabled="isEdit" v-model.trim="formInline.startTime" type="datetime" placeholder="选择开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
</el-form-item>
<el-form-item label="会议结束时间" prop="endTime">
                <el-date-picker :disabled="isEdit" v-model="formInline.endTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right">
</el-form-item>

二、表单验证

data() {
    // 时间的校验
    var validateStartTime = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('开始时间不能为空'))
      } else {
        if (new Date(this.formInline.startTime).getTime() <= new Date().getTime()) {
          callback()
        } else {
          callback()
        }
      }
    };
    var validateEndTime = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('结束时间不能为空'))
      } else {
        if (
          new Date(this.formInline.startTime).getTime() >=
          new Date(this.formInline.endTime).getTime()
        ) {
          callback(new Error('结束时间必须大于开始时间!'))
        } else {
          callback()
        }
      }
    }
    return {
        formRules: {
        name: [
          { required: true, message: '请输入会议名称', trigger: 'blur' },
        ],
        startTime: [
          { required: true, validator: validateStartTime, trigger: 'blur' },
        ],
        endTime: [
          { required: true, validator: validateEndTime, trigger: 'blur' },
        ],
      },
    }
  },

三、验证
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45791799/article/details/121081114