[element-ui] el-date-picker a-range-picker type=“daterange“ rules 校验

news/2024/2/28 16:40:30

项目场景:

`在项目中表单提交有时间区间校验

问题描述

想当然的就和其他单个输入框字符串校验,导致提交保存的时候 ,初次日期未选择,规则提示。后续在同一表单上继续提交时,校验失效。走进了死胡同,一直以为是二次校验的问题 。没有从根本出发,是校验时间的rules不对 。导致搞了很长时间


---# 原因分析:
>因为这里是个数组,写法上和常规的字符串的写法不能一致---# 解决方案:
>提示:这里填写该问题的具体解决方案:```javascript
<el-form class="pl13" :rules="rules" ref="ruleForm" :model="searchKey"><el-form-item prop="daterange"><el-date-pickerv-model="value1"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>
</el-form>
rules: {dateRange: [{type: 'array',required: true,message: '请选择日期区间',fields: {// tpye类型试情况而定,所以如果返回的是date就改成date,如果返回的是string就改成string0: { type: 'date', required: true, message: '请选择开始日期' },1: { type: 'date', required: true, message: '请选择结束日期' },},},],}

问题背后的问题:
第一时间没想到解决方案的原因是:没真正直自己的需求 ,时间 既然校验不提示,那肯定是校验写的有问题 就不要一根筋死扣 明白自己的需求并去找解决方案。而不是好无厘头的随意乱改一通

https://blog.csdn.net/qq_14993591/article/details/127015992

引申:

时间可自动选择,同时不要忽略 也可以手动输入


http://www.ppmy.cn/news/1053935.html

相关文章

01、Cannot resolve MVC View ‘xxxxx前端页面‘

Cannot resolve MVC View ‘xxxxx前端页面’ 没有找到对应的mvc的前端页面。 代码&#xff1a;前端这里引入了 thymeleaf 模板 解决&#xff1a; 需要添加 thymeleaf 的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>s…

chatGPT界面

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><title>复选框样式示例</title> </head> <style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{widt…

u-view 的u-calendar 组件设置默认日期后,多次点击后,就不滚动到默认日期的位置

场景&#xff1a;uniapp开发微信小程序 vue2 uview版本&#xff1a;2.0.36 &#xff1b; u-calendar 组件设置默认日期后 我打开弹窗&#xff0c;再关闭弹窗&#xff0c; 重复两次 就不显示默认日期了 在源码中找到这个位置进行打印值&#xff0c;根据出bug前后的值进行…

# ruby安装设置笔记

ruby安装设置笔记 文章目录 ruby安装设置笔记1 克隆并设置环境变量2 安装ruby3 设置ruby4 设置源5 安装bundler6 检查安装后的软件版本7 ubuntu 20.04 默认ruby环境 系统自带的ruby版本低了&#xff0c;需要手动安装更高版本&#xff08;使用rbenv方式&#xff09; 环境&#x…

行为型(八) - 备忘录模式

一、概念 备忘录模式&#xff08;Memento Pattern&#xff09;&#xff1a;也叫快照&#xff08;Snapshot&#xff09;模式&#xff0c;在不违背封装原则的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在该对象之外保存这个状态&#xff0c;以便之后恢复对象为先前…

小白带你学习linux的shell脚本基础(三十五)

目录 一、概述 1、脚本就是将手动一次性执行的命令进行规范且自动化 2、学习路径 2.1表达式 2.2语句 2.3函数 2.4正则表达式 2.5文件操作四剑客 二、表达式 1、shell 2、表达式 2、1 变量 2、2 运算符 2、3shell脚本编写规范 2、4shell运行规则 2、5shell脚本运…

生信豆芽菜-缺氧评分的计算

网址&#xff1a;http://www.sxdyc.com/gradeHypoxia 1、数据准备 表达谱数据&#xff0c;行为基因&#xff0c;列为样本 2、提交后&#xff0c;等待运行成功即可下载 当然&#xff0c;如果不清楚数据是什么样的&#xff0c;可以选择下载我们的示例数据&#xff0c;也可以…

Nginx 无法转发本地端口

问题描述 本文主要分析解决 centos 下 nginx 配置端口转发后不生效&#xff0c;通过 nginx 配置 server 转发后&#xff0c;无法达到预期的转发目的&#xff0c;并出现502错误的问题。假设虚拟机 ip 为 192.168.0.8&#xff0c;并且在虚拟机内部署一个了 golang 服务&#xff…

英飞凌 Tc3xx AURIX 2G多核处理器简介

目录 1、概述 2、AURIX 2G多核架构 2.1、多核简介 2.2、片上总线简介 3、AURIX 2G内核简介 3.1、内核架构 3.2、内核寄存器 3.3、中断处理 4、AURIX 2G内存简介 4.1、内存简介 4.2、内存映射 1、概述 该产品具备多达六核的高性能架构,每个内核的时钟频率最高可达 30…

亿邦智库《2023数字化采购发展报告》解读,企企通推动企业采购数字化及供应链协同智能化发展

采购成本是企业成本控制的主体和核心。在当前供应链的背景下&#xff0c;采购数字化一方面可以通过提高效率来降低成本&#xff0c;增强合作和风险缓解能力&#xff1b;另一方面&#xff0c;信息、物流和资本流动的整合和重建将提高供应链的灵活性和灵活性&#xff0c;增强面向…

【数据库】连接查询

1 内连接查询 select 学员信息表.* 学员成绩表.* from 学员信息表 inner join 学员成绩表 on 学员信息表,学号 学员成绩表.学号; 2 左连接查询 select 学员信息表.*,学员成绩表.* from 学员信息表 left join 学员成绩表 on 学员信息表,学号 学员成绩表,学号&#xff1b; 3 右…

Idea配置Remote Host

一、打开RemoteHost窗口 双击shift打开全局搜索 搜索Tools→Deployment→Browse Remote Host或 idea项目顶部Tools→Deployment→Browse Remote Host 二、添加服务 右侧边栏打开RemoteHost&#xff0c;点击三个点&#xff0c;起个名字&#xff0c;选择type为SFTP&#xff…

ahooks.js:一款强大的React Hooks库及其API使用教程(五)

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程61. useEventTarget62. useExternal63. useFavicon64. useMutationObserver65. useLongPress66. useScroll67. useResponsive68. useFocusWithin69. useControllableValue70. useEventEmitter 一、aho…

【官方中文文档】Mybatis-Spring #简介

简介 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。它将允许 MyBatis 参与到 Spring 的事务管理之中&#xff0c;创建映射器 mapper 和 SqlSession 并注入到 bean 中&#xff0c;以及将 Mybatis 的异常转换为 Spring 的…

基于swing的小区物业管理系统java jsp社区报修信息mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的小区物业管理系统 系统有1权限&#xff1…

前端常用插件推荐

1.MD格式文件 我们经常会遇到md格式文件的编辑和预览&#xff0c;推荐两个插件&#xff1a; uiw/react-markdown-editor&#xff0c;uiw/react-markdown-preview&#xff0c;不通语言应该有对应的版本&#xff0c;这里是react为例子&#xff0c;也是用过其他的组件&#xff0…

fastdeploy部署多线程/进程paddle ocr(python flask框架 )

部署参考&#xff1a;https://github.com/PaddlePaddle/FastDeploy/blob/develop/tutorials/multi_thread/python/pipeline/README_CN.md 安装 cpu&#xff1a; pip install fastdeploy-python gpu &#xff1a;pip install fastdeploy-gpu-python #下载部署示例代码 git cl…

谷粒商城环境搭建一:Docker容器部署

Docker容器部署 VMware虚拟机安装 参考&#xff1a;VMware虚拟机安装Linux教程 Docker安装 Linux安装Docker # 1.更新apt包索引 sudo apt-get update# 2.安装以下包以使apt可以通过HTTPS使用存储库&#xff08;repository&#xff09; sudo apt-get install -y apt-transpor…

数据结构好题总结

Cut Inequality Down 题解 https://blog.csdn.net/lzh_naive/article/details/103340568 概括&#xff1a;st表倍增类st表 考虑如果没有UL限制的话&#xff0c;相当于是前缀和 我们发现&#xff0c;如果某次到了U/L&#xff08;相当于是一次碰壁&#xff09;那么这个值已知…

分支和循环语句-C语言(初阶)

目录 一、什么是语句 二、分支语句 2.1 if语句 2.2 switch语句 三、循环语句 3.1 while循环 3.2 for循环 3.3 do...while循环 一、什么是语句 C语言语句有五类&#xff1a;表达式语句、函数调用语句、控制语句、复合语句、空语句。 控制语句用于控制程序的执行流程&#xff0…
最新文章