在 form-create/ant-design-vue 中使用自定义校验规则的正确方式

问题背景

在使用 form-create/ant-design-vue 构建表单时，开发者可能会遇到自定义校验规则不生效的情况。特别是当尝试使用 Promise 风格的校验器时，发现校验逻辑没有被触发。这实际上是由于框架对校验器实现方式的特定要求导致的。

核心问题分析

form-create/ant-design-vue 的校验机制基于 Ant Design Vue 的表单验证系统，但它对自定义校验器的实现方式有特殊要求：

1. 不支持 Promise 风格的校验器：与一些现代表单库不同，它不支持直接返回 Promise 对象
2. 必须使用回调函数：需要通过显式调用 callback 函数来完成校验
3. 错误处理方式：错误信息需要通过 callback 函数传递，而不是通过 Promise.reject

正确实现方式

要实现一个有效的自定义校验器，应该按照以下模式编写代码：

validator: (rule, value, callback) => {
  if (typeof value === 'string') {
    if (value.trim() === '') {
      callback(new Error('学校代码不能为空'));
      return;
    } else if (value.length > 20) {
      callback(new Error(`学校代码不能超过20个字符`));
      return;
    } else if (value.length < 1) {
      callback(new Error(`学校代码不能少于1个字符`));
      return;
    }
  }
  callback();
}

关键注意事项

1. 必须调用 callback：无论校验是否通过，都必须调用 callback 函数
2. 错误传递方式：校验失败时，需要将 Error 对象作为 callback 的第一个参数
3. 成功情况：校验通过时，调用 callback() 不带参数
4. 返回值无关：validator 函数的返回值不会被使用，所有逻辑都应通过 callback 处理

与标准 Ant Design Vue 的区别

虽然 form-create/ant-design-vue 基于 Ant Design Vue，但在校验器实现上有以下差异：

1. 不支持 async/await：不能使用异步函数作为校验器
2. 更严格的回调要求：必须使用 callback 模式，不能省略
3. 集成方式：通过 form-create 的规则配置，而非直接使用 Form.Item 的 rules 属性

最佳实践建议

1. 保持校验器简洁：复杂的校验逻辑可以提取到单独的函数中
2. 统一错误处理：可以封装一个统一的错误处理工具函数
3. 考虑性能：避免在校验器中执行耗时操作
4. 多字段关联校验：对于关联字段的校验，建议使用表单的全局验证方法

总结

理解 form-create/ant-design-vue 的校验机制对于构建可靠的表单至关重要。通过正确使用 callback 模式而非 Promise 风格，开发者可以确保自定义校验规则按预期工作。这种设计虽然与现代异步编程模式有所不同，但保持了与底层 Ant Design Vue 表单系统的高度兼容性。