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

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

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

代码：

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

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

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

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

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

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