Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。但是官网的示例只有普通日期类型的验证,没有时间范围的验证。
一开始,我认为时间时间范围的是一个数组类型,验证rule把type写成array应该就可以了,但是试了一下却不行。
代码:
![clip_image002[9] clip_image002[9]](https://img2018.cnblogs.com/blog/996327/201810/996327-20181029163455643-626640026.jpg)
结果界面上还是提示验证失败:
![clip_image004[9] clip_image004[9]](https://img2018.cnblogs.com/blog/996327/201810/996327-20181029163459964-1165326941.jpg)
网上查找了一下,也没有找到解决办法。看了一下官网文档,表单支持自定义校验规则,那么可以自己写一个校验规则,把上面的rule代码改成下面这样:
![clip_image006[8] clip_image006[8]](https://img2018.cnblogs.com/blog/996327/201810/996327-20181029163501006-432269044.jpg)
重点是validator:validatorDateRange这句,意思是使用自己定义的validatorDateRange校验函数,函数定义如下:
![clip_image008[8] clip_image008[8]](https://img2018.cnblogs.com/blog/996327/201810/996327-20181029163501892-2054752134.jpg)
在这个函数中就可以自己判断数据是否正确,上面的代码只是简单判断了值是否为空,严格一点还可以添加时间是否正确的检查,最后运行效果如下:
![clip_image010[8] clip_image010[8]](https://img2018.cnblogs.com/blog/996327/201810/996327-20181029163503460-178406365.jpg)
不再提示时间不对了,完美运行。