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