vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

表单项

javascript 复制代码
 <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable
                              v-model="form.startTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable
                              v-model="form.endTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

验证方法

javascript 复制代码
const isStartTimeAfterEndTime  = (rule, value, callback) => {
  if (!form.value.startTime || !form.value.endTime) {
    callback();
  }
  //开始时间
  const startTime= new Date(form.value.startTime);
  //结束时间
  const endTime= new Date(form.value.endTime);
  console.log(rule);
  if (endTime.getTime() < startTime.getTime()) {
    if (rule.field === "endTime") {
      callback(new Error("结束时间需要大于开始时间,请选择正确的时间!"));
    } else {
      callback(new Error("开始时间需要小于结束时间,请选择正确的时间!"));
    }
  } else {
    callback();
  }
};

在规则中使用

javascript 复制代码
rules: {
    startTime: [
      { required: true, message: "开始时间不能为空", trigger: "blur" },
      {	
        //调用定义的方法校验格式是否正确
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
    endTime: [
      { required: true, message: "结束时间不能为空", trigger: "blur" },
      {	
        //调用定义的方法校验格式是否正确
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
   
  }
相关推荐
Sheldon一蓑烟雨任平生2 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
鹿鹿鹿鹿isNotDefined3 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
武昌库里写JAVA3 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
Itai4 小时前
自定义 markdown 解析规则并渲染 Vue 组件
vue.js
karshey4 小时前
【vue】NoticeBar:滚动通知栏组件手动实现(内容、速度、循环间隔可配置)
前端·javascript·vue.js
Cherry Zack5 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
慧一居士6 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
_23336 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
浪裡遊8 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
duansamve10 小时前
TS在Vue3中的使用实例集合
typescript·vue3