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

表单项

 <el-row><el-col :span="12"><el-form-item label="开始时间" prop="startTime"><el-date-picker clearablev-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 clearablev-model="form.endTime"type="date"value-format="YYYY-MM-DD"placeholder="请选择结束时间"></el-date-picker></el-form-item></el-col></el-row>

验证方法

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();}
};

在规则中使用

rules: {startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" },{	//调用定义的方法校验格式是否正确validator: isStartTimeAfterEndTime, trigger: "blur"}],endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" },{	//调用定义的方法校验格式是否正确validator: isStartTimeAfterEndTime, trigger: "blur"}],}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构设计师教程(清华第2版)<第2章 计算机系统基础知识>解读

系统架构设计师教程 第二章 计算机系统基础知识-2.1计算机系统概述 2.2 计算机硬件 2.1 计算机系统概述2.2 计算机硬件2.2.1 计算机硬件组成2.2.2 处理器2.2.2.1 控制单元(CU)2.2.2.2 算术逻辑单元(ALU)2.2.2.3 指令集2.2.2.3.1 CISC的特点2.2.2.3.2 RISC的特点2.2.3 存储器2.2…

Ollama完整教程:本地LLM管理、WebUI对话、Python/Java客户端API应用

老牛同学在前面有关大模型应用的文章中&#xff0c;多次使用了Ollama来管理和部署本地大模型&#xff08;包括&#xff1a;Qwen2、Llama3、Phi3、Gemma2等&#xff09;&#xff0c;但对Ollama这个非常方便管理本地大模型的软件的介绍却很少。 目前&#xff0c;清华和智谱 AI 联…

Python | Leetcode Python题解之第227题基本计算器II

题目&#xff1a; 题解&#xff1a; class Solution:def calculate(self, s: str) -> int:n len(s)stack []preSign num 0for i in range(n):if s[i] ! and s[i].isdigit():num num * 10 ord(s[i]) - ord(0)if i n - 1 or s[i] in -*/:if preSign :stack.append(…

智能制造热点词汇科普篇——工业微服务

随着互联网技术的不断发展&#xff0c;近十年来&#xff0c;微服务也逐渐走进人们的视线中来。何为微服务&#xff1f;让我们先来看看百度百科上的定义&#xff1a;微服务&#xff08;或称微服务架构&#xff09;是一种云原生架构方法&#xff0c;在单个应用中包含众多松散耦合…

人工智能算法工程师(中级)课程6-sklearn机器学习之聚类问题与代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程6-sklearn机器学习之聚类问题与代码详解。在机器学习领域&#xff0c;聚类是一种无监督学习方法&#xff0c;旨在将相似的数据点划分为同一类别。sklearn是一个广泛应用于机器学习的Py…

动态引用的艺术:在Postman中实现自动化的终极指南

&#x1f300; 动态引用的艺术&#xff1a;在Postman中实现自动化的终极指南 在API开发和测试中&#xff0c;Postman是一个强大的工具&#xff0c;它提供的动态引用功能可以帮助我们实现自动化和更高效的测试流程。本文将深入探讨如何在Postman中使用动态引用&#xff0c;通过…

vue3 + i18n 中英文切换

第一步&#xff1a;安装vue-i18n npm install vue-i18n 第二步&#xff1a;配置语言包及js文件 目录如下&#xff1a; 英文语言包 en.js // lang/en.js - 英文语言包 export default {menu: { 库房管理: Warehouse Management,入库检测: Incoming Inspection, 设…

华为ensp实现防火墙的区域管理与用户认证

实验环境 基于该总公司内网&#xff0c;实现图片所在要求 后文配置请以本图为准 接口配置与网卡配置 1、创建vlan 2、防火墙g0/0/0与云页面登录 登录admin,密码Admin123&#xff0c;自行更改新密码 更改g0/0/0口ip&#xff0c;敲下命令service-manage all permit 网卡配置…

Elastic Stack--15--聚合查询(SUM、MAX、MIN、AVG)案例

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 ES的聚合查询(SUM、MAX、MIN、AVG)1.求和查询2.求平均值3.最大最小值查询4.唯一值查询 (类似于sql中的distinct 去重)5.stats聚合 ES的聚合查询(SUM、MAX、MIN、AVG…

Qt:13.多元素控件(QLinstWidget-用于显示项目列表的窗口部件、QTableWidget- 用于显示二维数据表)

目录 一、QLinstWidget-用于显示项目列表的窗口部件&#xff1a; 1.1QLinstWidget介绍&#xff1a; 1.2属性介绍&#xff1a; 1.3常用方法介绍&#xff1a; 1.4信号介绍&#xff1a; 1.5实例演示&#xff1a; 二、QTableWidget- 用于显示二维数据表&#xff1a; 2.1QTabl…

如何在工作中开悟?

我常常会听到各种大佬分享的经验&#xff0c; 你要在工作中去寻找价值&#xff0c;多思考自己写的代码&#xff0c;多审视自己的工作&#xff0c;多回看自己成长。 你不能只当粘贴复制的码农&#xff0c;要成为写代码的程序员。 不能只当工具人&#xff0c;要多理解业务。 等等…

探索生命科学的新边疆:Transformer模型在生物医药领域的革命性应用

探索生命科学的新边疆&#xff1a;Transformer模型在生物医药领域的革命性应用 随着人工智能技术的飞速发展&#xff0c;Transformer模型已经从自然语言处理领域跨越到生物医药领域&#xff0c;为生物信息学和药物发现带来了新的机遇。本文将深入探讨Transformer模型在生物医药…

YOLOv10改进 | Conv篇 | 利用YOLO-MS的MSBlock轻量化网络结构(既轻量又长点)

一、本文介绍 本文给大家带来的改进机制是利用YOLO-MS提出的一种针对于实时目标检测的MSBlock模块(其其实不能算是Conv但是其应该是一整个模块)&#xff0c;我们将其用于C2f中组合出一种新的结构&#xff0c;来替换我们网络中的模块可以达到一种轻量化的作用&#xff0c;我将其…

软航文档控件VUE示例运行及控件替换方法记录

目录 示例运行 步骤一、npm install 步骤二、npm run dev 软航文档控件替换 附 vue小白记录一下软航文档控件VUE示例的运行方法以及示例中控件的替换过程。 示例运行 在已经安装好VUE环境的电脑上&#xff0c;VUE环境部署可以参考另一篇&#xff1a;配置VUE环境过程中 …

Drools开源业务规则引擎(六)- Drools Flow中RuleFlow文件即*.rf文件介绍

文章目录 Drools开源业务规则引擎&#xff08;六&#xff09;- RuleFlow文件即*.rf文件介绍1.\<header>1.1.\<imports>a.标签格式b.属性说明c.示例代码 1.2.\<globals>a.标签格式b.属性说明c.示例代码 1.3.\<functionImports>a.标签格式b.属性说明c.示…

Open3D 计算点云FPFH特征

目录 一、概述 1.1法线估计 1.2SPFH&#xff08;Simplified Point Feature Histograms&#xff09;计算 1.3FPFH计算 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2计算数据 一、概述 FPFH&#xff08;Fast Point Feature Histogram&#xff0…

安全策略与用户认证综合实验

一、实验拓扑 二、实验需求 1,DMZ区内的服务器,办公区仅能在办公时间内(9:00-18:00)可以访问,生产区的设备全天可以访问. 2,生产区不允许访问互联网,办公区和游客区允许访问互联网 3,办公区设备10.0.2.10不允许访问DMz区的FTP服务器和HTTP服务器,仅能ping通10.0.3.10 4,办公区…

nginx初理解

没有ngix时&#xff0c;有两台服务器&#xff0c;供访问 1. 现在有两台服务器上同样的路径下都放了一个&#xff0c; 都能通过ip加端口访问到页面 后端项目 &#xff08;查看tomcat中的配置中的 server.xml&#xff0c;能找到项目路径&#xff09; tomacat 也都有 两个…

LCR 136. 删除链表的节点

给定单向链表的头指针和一个要删除的节点的值&#xff0c;定义一个函数删除该节点。 返回删除后的链表的头节点。 示例 1: 输入: head [4,5,1,9], val 5 输出: [4,1,9] 解释: 给定你链表中值为 5 的第二个节点&#xff0c;那么在调用了你的函数之后&#xff0c;该链表应变…

加密与安全 密钥体系的三个核心目标之完整性解决方案

在密钥体系中&#xff0c;确保数据完整性是重要目标之一。以下为您详细讲解相关的完整性解决方案&#xff1a; 消息认证码&#xff08;MAC&#xff09;&#xff1a; 消息认证码是基于共享密钥和特定算法生成的固定长度代码。在发送方&#xff0c;将消息和共享密钥作为输入&…