Valibot 中的条件验证：使用管道实现灵活校验

在现代前端开发中，表单验证是一个至关重要的环节。Valibot 作为一个强大的验证库，提供了丰富的验证功能。本文将重点介绍如何使用 Valibot 的管道（pipe）机制实现条件验证，特别是针对那些依赖于外部参数的复杂验证场景。

条件验证的核心概念

条件验证指的是根据特定条件决定是否执行某些验证逻辑。在 Valibot 中，我们可以通过组合不同的验证动作来实现这一功能。与简单的"密码/确认密码"匹配不同，这里我们关注的是更复杂的、依赖于外部参数的验证场景。

基础实现：check 与 forward 的组合

Valibot 推荐使用 check 动作配合 forward 方法来实现条件验证。这种组合方式特别适合需要在多个字段间建立依赖关系的场景。

import * as v from 'valibot';

const RegisterSchema = v.pipe(
  v.object({
    email: v.pipe(
      v.string(),
      v.nonEmpty('请输入邮箱地址'),
      v.email('邮箱格式不正确')
    ),
    password1: v.pipe(
      v.string(),
      v.nonEmpty('请输入密码'),
      v.minLength(8, '密码长度至少8位')
    ),
    password2: v.string(),
  }),
  v.forward(
    v.check(
      (input) => input.password1 === input.password2,
      '两次输入的密码不一致'
    ),
    ['password2']
  )
);

在这个例子中，我们创建了一个注册表单的验证模式。关键点在于：

1. 首先定义基本的字段验证规则
2. 然后使用 check 动作添加密码匹配的验证逻辑
3. 最后通过 forward 方法将错误信息关联到特定字段（这里是 password2）

进阶方案：partialCheck 解决前置验证问题

在实际应用中，我们可能会遇到一个问题：如果前置验证（如邮箱验证）失败，后续的 check 动作可能不会执行。为了解决这个问题，Valibot 提供了 partialCheck 动作。

import * as v from 'valibot';

const RegisterSchema = v.pipe(
  v.object({
    email: v.pipe(
      v.string(),
      v.nonEmpty('请输入邮箱地址'),
      v.email('邮箱格式不正确')
    ),
    password1: v.pipe(
      v.string(),
      v.nonEmpty('请输入密码'),
      v.minLength(8, '密码长度至少8位')
    ),
    password2: v.string(),
  }),
  v.forward(
    v.partialCheck(
      [['password1'], ['password2']],
      (input) => input.password1 === input.password2,
      '两次输入的密码不一致'
    ),
    ['password2']
  )
);

partialCheck 与 check 的主要区别在于：

1. 它明确指定了依赖的字段路径
2. 即使其他字段验证失败，只要依赖字段有值，就会执行验证
3. 更适合处理复杂的字段间依赖关系

最佳实践建议

1. 明确依赖关系：在使用条件验证时，清楚地定义字段间的依赖关系
2. 错误信息定位：合理使用 forward 将错误信息关联到正确的字段
3. 验证顺序：将基础验证放在前面，条件验证放在后面
4. 性能考虑：对于复杂的条件验证，考虑使用 partialCheck 来优化验证流程

总结

Valibot 通过 check 和 partialCheck 动作配合 forward 方法，为开发者提供了强大的条件验证能力。这种基于管道的设计使得验证逻辑可以灵活组合，既保持了代码的简洁性，又能处理复杂的业务场景。无论是简单的字段匹配，还是依赖外部参数的高级验证，都能通过这些工具优雅地实现。