Semi-Design 表单校验规则中 validator 返回值类型问题解析

问题背景

在使用 Semi-Design 的表单组件时，开发者可能会遇到一个看似奇怪的现象：当表单字段设置了 required 校验规则和其他自定义校验规则时，在某些情况下 required 的错误提示不会正常显示。这实际上与 Semi-Design 底层使用的 async-validator 校验库的工作机制有关。

问题现象重现

假设我们有一个表单，其中包含两个字段：

1. name 字段，初始值为 "semi"
2. shortcut 字段，初始值为 "se"

校验规则配置如下：

• 必填校验（required）
• 类型校验（type: 'string'）
• 自定义校验（validator），要求值必须等于 "semi"
• 另一个自定义校验（validator），要求值必须以 "se" 开头

当用户清空 name 字段并提交表单时，预期应该显示 "required error" 提示，但实际上却没有显示任何错误信息。

问题根源分析

这个问题的根本原因在于 async-validator 对 validator 函数返回值的处理方式。在 JavaScript 中，很多表达式会返回"真值"（truthy）或"假值"（falsy），但 async-validator 需要明确的布尔值（true/false）来判断校验是否通过。

例如，当值为空字符串时：

• value && value.startsWith('se') 会返回空字符串（falsy）
• 但 async-validator 期望的是明确的 false 值

解决方案

为了解决这个问题，我们需要确保所有自定义校验函数都返回明确的布尔值。最简单的方法是用 Boolean() 函数包装返回值：

validator: (rule, value) => Boolean(value && value.startsWith('se'))

这样无论什么情况下，校验函数都会返回 true 或 false，而不是其他可能被误解的值。

最佳实践建议

1. 始终返回布尔值：在编写自定义校验函数时，确保返回明确的 true 或 false，而不是依赖 JavaScript 的真值/假值转换。

2. 注意空值处理：特别是对于字符串操作，要考虑到空字符串、null 或 undefined 的情况。

3. 测试边界情况：特别测试空值、空格字符串等边缘情况下的校验行为。

4. 组合使用校验规则：将 required 校验与其他校验分开处理，确保必填校验能优先触发。

总结

Semi-Design 的表单校验功能强大且灵活，但开发者需要理解其底层依赖的 async-validator 库的工作机制。通过确保校验函数返回明确的布尔值，可以避免许多潜在的校验问题，提供更可靠的表单验证体验。