Elemant-UI日期范围的表单验证
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。但是官网的示例只有普通日期类型的验证,没有时间范围的验证。
一开始,我认为时间时间范围的是一个数组类型,验证rule把type写成array应该就可以了,但是试了一下却不行。
代码:

结果界面上还是提示验证失败:

网上查找了一下,也没有找到解决办法。看了一下官网文档,表单支持自定义校验规则,那么可以自己写一个校验规则,把上面的rule代码改成下面这样:

重点是validator:validatorDateRange这句,意思是使用自己定义的validatorDateRange校验函数,函数定义如下:

在这个函数中就可以自己判断数据是否正确,上面的代码只是简单判断了值是否为空,严格一点还可以添加时间是否正确的检查,最后运行效果如下:

不再提示时间不对了,完美运行。
Elemant-UI日期范围的表单验证的更多相关文章
- amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...
- JavaScript常用表单验证正则表达式(身份证、电话号码、邮编、日期、IP等)
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JS常见操作,日期操作,字符串操作,表单验证等
复制代码 //第一篇博文,希望大家多多支持 /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. f ...
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数
1.javascript的数组API Js代码 收藏代码 //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.lengt ...
- ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
随机推荐
- pytorch的函数中的group参数的作用
1.当设置group=1时: conv = nn.Conv2d(in_channels=, out_channels=, kernel_size=, groups=) conv.weight.data ...
- 我的工具:Ping工具
C# Ping工具 通过该工具可以多个地点Ping服务器以检测服务器响应速度,同时也可以测试网站的响应速度,解析时间,服务器连接时间,下载速度 工具下载地址:https://download.csdn ...
- (一)jdk8学习心得之遍历
一.遍历 -- 最好和stream流连用 使用jdk8提供的forEach进行遍历时,采用的是多线程的操作,理论上讲是会比原来的方法更快.但是注意,系统启动时需要加载lambda框架的内容.因此如果通 ...
- Python Scrapy项目创建(基础普及篇)
在使用Scrapy开发爬虫时,通常需要创建一个Scrapy项目.通过如下命令即可创建 Scrapy 项目: scrapy startproject ZhipinSpider 在上面命令中,scrapy ...
- babel 插件编写
一.开始 工具链接: 每一个节点都有如下所示的接口(Interface): interface Node { type: string; } 字符串形式的 type 字段表示节点的类型(如: &quo ...
- jdk自带的监测cpu/内存、线程等信息的工具
Jvisualvm:jdk自带的监控工具(JDK1.6+) 在终端中输入Jvisualvm回车出现如下界面:
- jenkins针对不同的项目组对用户进行权限分配
因jenkins上存有de(开发).te(测试)等三个不同环境的项目,同时因为项目需求,需要对不同的开发及测试人员配置不同的jenkins权限,即以项目为单位,对不同人员进行不同权限配置,要求如下: ...
- win10双系统安装卸载ubuntu
安装 1. 官网下载需要安装的Ubuntu版本 2. 格式化U盘,用UltraISO软件将Ubuntu写入U盘 3. 设置电脑U盘启动,重启电脑安装,注意安装时关闭在线下载,否则会安装很久 4. 安装 ...
- hdu-1054(二分图最大匹配)
题意:给你一个图,图里有墙壁和空地,空地可以放置一台机关枪,机关枪可以朝着四个方向发射,子弹不能穿透墙壁,但是射程无限,机关枪会被损坏如果被另一台机关枪的子弹打到,问你最多能放置多少台机关枪: 解题思 ...
- vue打包静态资源路径不正确的解决办法【转】
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...