Elemant-UI日期范围的表单验证

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

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

代码：

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

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

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

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

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

转载于:https://www.cnblogs.com/lixiuke/p/9871333.html

Elemant-UI日期范围的表单验证相关推荐

table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...
vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 最近在开发一个移动端商城项目,用到了有赞的 vant ,因为最近大都采用 element ui 在做PC端的东西,对比来说,vant的完成 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
element的日期选择使用value-format之后表单验证报错
element日期控件在表单验证时报错:Error in event handler for "el.form.change": "TypeError: value.ge ...
LuLu UI表单验证
LuLu UI 一款很好用的UI 链接:https://l-ui.com/content/about/design.html 表单验证功能取消及时性: var elForm = $(form); va ...
element ui form循环嵌套表单及嵌套表单的验证方法（校验）
首先看看成果表单一级.二级嵌套的增加.删除一级.二级嵌套的表单的验证知识点一级嵌套循环:<div v-for="(item, index) in form.product ...
vant ui 表单验证不通过信息提示的消除
vant ui 表单验证不通过信息提示的消除在使用vant表单验正消除表单不通过的信息时候可以个van-form 标签里加个 :key="formKey" , 我有尝试过使用:k ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...

Elemant-UI日期范围的表单验证

Elemant-UI日期范围的表单验证相关推荐

最新文章

热门文章