Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。但是官网的示例只有普通日期类型的验证,没有时间范围的验证。

一开始,我认为时间时间范围的是一个数组类型,验证rule把type写成array应该就可以了,但是试了一下却不行。

代码:

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

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

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

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

不再提示时间不对了,完美运行。

Elemant-UI日期范围的表单验证的更多相关文章

  1. amaze UI 如何添加原生表单验证

    这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...

  2. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  3. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  4. JavaScript常用表单验证正则表达式(身份证、电话号码、邮编、日期、IP等)

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  5. JS常见操作,日期操作,字符串操作,表单验证等

    复制代码 //第一篇博文,希望大家多多支持 /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. f ...

  6. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  7. js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数

    1.javascript的数组API Js代码 收藏代码 //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.lengt ...

  8. ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  9. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

随机推荐

  1. 【憩园】C#并发编程之异步编程(一)

    写在前面 C#5.0中,对异步编程进行了一次革命性的重构,引入了async和await这两个关键字,使得开发人员在不需要深刻了解异步编程的底层原理,就可以写出十分优美而又代码量极少的代码.如果使用得当 ...

  2. 07 Django REST Framework 解析器与渲染器

    01-解析器 REST 框架包括一些内置的Parser类,允许你接受各种媒体类型的请求.还支持定义自己的自定义解析器,这使你可以灵活地设计API接受的媒体类型. 注意: 开发客户端应用程序时应该始终记 ...

  3. Jsp监听器

    监听器: 监听器就是对内置对象的状态或者属性变化进行监听,并且做出反应的特殊的servlet,在web.xml文件中对监听器进行的配置. 内置对象有两种状态变化:产生.销毁,就是当产生内置对象的时候能 ...

  4. 关于spring boot中 EmbeddedServletContainerCustomizer

    EmbeddedServletContainerCustomizer这个在spring boot2.X的版本中就不再提供支持了貌似2.0版本还能用 ,用来提供对异常的处理.在支持EmbeddedSer ...

  5. Redis的常见用法

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  6. 安装Mediamanager 后Messenger后无法登录

    安装MediaManager以后Messenger无法登录,提示无法连接服务,出现以下信息. 解决办法,进入控制面板,卸载"Microsoft URL Scan"程序,即可解决.

  7. Django(八)上:Model操作和Form操作

    ↑↑↑点上面的”+”号展开目录 Model和Form以及ModelForm简介 Model操作: 创建数据库表结构 操作数据库表 做一部分的验证 Form操作: 数据验证(强大) ModelForm ...

  8. 《java核心技术36讲》学习笔记-------杨晓峰(极客时间)

    非常荣幸作为晓峰哥的同事,之前就看过这篇文章,重写读一遍,再学习学习. 一.开篇词 初级.中级:java和计算机科学基础.开源框架的使用:高级.专家:java io/nio.并发.虚拟机.底层源码.分 ...

  9. 【dp】求最长公共子序列

    [题目描述] 一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列X=<x1,x2,…,xm>X=<x1,x2,…,xm>,则另一序列Z=<z1 ...

  10. [CQOI2016]伪光滑数

    题目描述 若一个大于1的整数M的质因数分解有k项,其最大的质因子为Ak,并且满足Ak^K<=N,Ak<128,我们就称整数M为N-伪 光滑数.现在给出N,求所有整数中,第K大的N-伪光滑数 ...