Valibot 条件性验证的优雅实现

在表单验证场景中，我们经常遇到需要根据字段值是否存在来决定是否执行特定验证规则的场景。Valibot 作为一款灵活的 TypeScript 验证库，提供了简洁而强大的方式来处理这类条件验证需求。

常见场景分析

在实际开发中，电子邮件字段通常被设计为可选字段。但当用户确实输入了电子邮件时，我们需要确保其格式正确；而当字段为空时，则不应触发电子邮件格式验证。这种条件性验证是表单处理中的常见需求。

传统实现方式的问题

开发者可能会首先想到使用 v.optional 结合验证规则的方式：

const Schema = v.object({
  email: v.optional(v.string([v.email()])),
  password: v.string([v.minLength(1), v.minLength(8)]),
});

然而这种方式存在一个问题：即使字段值为空字符串 ''，Valibot 仍然会执行 email() 验证，这通常不是我们想要的行为。

Valibot 的优雅解决方案

Valibot 提供了 v.union 验证器，可以完美解决这个问题：

const Schema = v.object({
  email: v.union([v.literal(''), v.string([v.email()])]),
  password: v.string([v.minLength(1), v.minLength(8)]),
});

这种实现方式的精妙之处在于：

1. 使用 v.literal('') 明确匹配空字符串情况
2. 使用 v.union 创建"或"逻辑，允许字段要么是空字符串，要么是符合电子邮件格式的字符串
3. 当值为空字符串时，直接匹配第一个条件，不会触发电子邮件格式验证

深入理解验证流程

让我们分解这个验证器的工作流程：

1. 当 email 字段值为 '' 时：

   • 首先尝试匹配 v.literal('') 成功
   • 验证通过，不继续检查后续条件

2. 当 email 字段有非空值时：

   • v.literal('') 匹配失败
   • 继续尝试 v.string([v.email()])
   • 执行字符串类型检查和电子邮件格式验证

3. 当 email 字段为 undefined 时：

   • 由于没有使用 v.optional，验证会失败
   • 如需允许 undefined，可结合 v.optional 使用

更复杂的条件验证

对于更复杂的条件验证场景，Valibot 同样能优雅处理。例如，当需要根据其他字段的值来决定验证规则时，可以使用 v.union 结合 v.pick 或 v.omit 来实现。

最佳实践建议

1. 明确区分"空值"情况：确定你的业务逻辑中哪些值被视为"空"（如 ''、null、undefined）
2. 保持验证逻辑的清晰性：使用有意义的验证器组合，便于后期维护
3. 考虑使用 TypeScript 类型提示：良好的类型定义可以帮助在开发阶段发现潜在问题

Valibot 的这种设计体现了其"组合优于继承"的理念，通过简单的验证器组合就能实现复杂的验证逻辑，既保持了代码的简洁性，又不失灵活性。