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

时间:2022-04-22 17:02:14

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

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

代码:

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

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

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

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

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

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

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

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

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

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