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"
      }
    ],
   
  }
相关推荐
苹果酱05671 小时前
SpringCloud第二篇:注册中心Eureka
java·vue.js·spring boot·mysql·课程设计
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球
Hamm1 小时前
用一种全新的方式来实现i18n,和魔法字符串彻底说拜拜
前端·vue.js·typescript
《独白》2 小时前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
艾克马斯奎普特3 小时前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
青青奇犽3 小时前
Vue 组件通信全解析:七种核心方式与最佳实践
前端·vue.js·面试
青青奇犽3 小时前
页面渲染优化:提升性能的关键策略🚀
前端·vue.js·面试
JustHappy4 小时前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
Lingxing4 小时前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
Jenlybein4 小时前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js