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

news/2025/1/3 8:26:16/

项目场景:

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

问题描述

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