Valibot 中实现必填字段但允许默认值为 null 的解决方案

Valibot 是一个强大的 TypeScript 数据验证库，最近在社区中有一个关于如何处理必填字段但允许默认值为 null 的有趣讨论。本文将深入探讨这个问题的背景、解决方案以及最佳实践。

问题背景

在实际开发中，特别是与表单库（如 react-hook-form）配合使用时，我们经常会遇到这样的需求：某个字段在表单提交时必须提供有效值（即必填），但在表单初始化时允许其默认值为 null。这种场景常见于需要用户交互才能确定值的字段，比如下拉选择、自定义组件等。

传统解决方案

在 Valibot 的早期版本中，开发者通常需要采用以下两种方式之一：

1. 使用 Omit 和联合类型：创建一个派生类型，将必填字段的类型扩展为允许 null
2. 使用默认值占位符：为 nullable 字段提供一个无效的默认值（如空字符串）

这两种方法都有明显的缺点：前者增加了类型系统的复杂性，后者可能导致业务逻辑中出现无效状态。

Valibot 的最新解决方案

随着 Valibot 的更新（#502 合并后），现在可以通过更优雅的方式实现这一需求：

import * as v from 'valibot';

const FormSchema = v.object({
  name: v.string(),
  role: v.nullable(
    v.object({
      id: v.string(),
      name: v.string(),
    }),
    { id: '', name: '' } // 默认值
  ),
  secondaryRole: v.nullable(
    v.object({
      id: v.string(),
      name: v.string(),
    })
  ),
});

这个方案的关键点在于：

• 使用 nullable 包装器允许字段值为 null
• 为必填字段提供默认值，确保初始化时不为 null
• 同时保持提交时的验证要求

实际应用场景

这种模式特别适合以下场景：

1. 复杂表单交互：当某些字段需要通过用户交互（如点击、选择）才能确定值时
2. 多步骤表单：在分步表单中，某些字段可能在后续步骤才需要填写
3. 条件必填字段：根据其他字段的值动态决定是否必填的字段

最佳实践建议

1. 明确区分输入和输出类型：利用 Valibot 的 Input 和 Output 类型工具
2. 合理设置默认值：选择与业务逻辑相符的默认值，避免使用魔法值
3. 文档注释：为这种特殊字段添加清晰的注释，说明其行为
4. 测试覆盖：确保测试用例覆盖初始状态和提交状态的验证

总结

Valibot 通过不断改进其 API 设计，为开发者提供了更灵活、更符合实际业务需求的验证方案。这种允许必填字段默认值为 null 的模式，很好地平衡了类型安全性和开发便利性，是表单处理中一个非常有价值的工具。