Ant Design表单：巧妙控制字段多规则校验触发时机

在Ant Design 3的Form组件中，如何针对同一个表单字段设置多个校验规则，并分别控制其触发时机（例如，部分规则在onChange事件触发，其他规则在onBlur事件触发）？ Ant Design 3本身并不直接支持此功能，本文提供一种灵活的解决方案。

直接在rules数组中定义不同触发时机并非Ant Design Form所支持。 之前的尝试，例如通过自定义组件手动添加错误样式，无法真正影响表单的校验结果。 我们需要更巧妙地利用validator函数。

解决方案：在validator函数中判断事件类型

关键在于充分利用rules数组中的validator函数。 每个validator函数接收两个参数：校验值和一个回调函数callback。 我们可以通过在validator内部判断事件类型（例如event.type），有选择地执行校验逻辑。

具体实现：

在自定义的validator函数中，根据event.type判断触发事件：

• 如果事件类型为blur，则执行特定规则的校验逻辑。
• 如果事件类型为change，则执行另一组规则的校验逻辑。

只有当事件类型与规则匹配时，才执行校验逻辑，并通过callback函数将校验结果返回给表单。 这需要在自定义组件中将事件类型作为参数传递给validator函数。

这种方法避免了直接修改Ant Design Form核心机制，通过巧妙运用现有功能实现了灵活的校验逻辑控制，比单纯依靠样式模拟校验更可靠，也更符合表单校验的规范。 它有效地解决了在单个rules数组中控制多个规则不同触发时机的问题。