Valibot 中如何保留原始输入用于配置错误信息

在 Valibot 这个数据验证库中，开发者经常会遇到需要自定义错误信息的需求。本文将深入探讨如何在验证管道中保留原始输入值，用于生成更友好的错误提示。

问题背景

当使用 Valibot 的管道验证（pipe）和配置（config）功能时，验证过程中的每个步骤都会处理输入数据。默认情况下，错误信息中的 received 值反映的是当前验证步骤接收到的值，而不是最初的原始输入。

例如，在字符串长度验证和数字转换验证的场景中：

• 字符串验证时，received 显示的是字符串长度而非原始字符串
• 数字转换时，received 显示的是转换结果而非原始输入

解决方案

Valibot 提供了两种主要方式来处理这个问题：

1. 使用 .input 属性

对于不包含数据转换的简单验证管道，可以直接使用 issue.input 来获取原始输入值：

const StringSchema = config(
  pipe(string(), maxLength(1)),
  { message: (issue) => `${issue.input} 长度超过1` }
)

2. 使用自定义验证器

对于包含数据转换的复杂场景，建议使用 custom 验证器：

const IntegerSchema = custom(
  (input) => Number.isInteger(Number(input))),
  (issue) => `${issue.received} 不是有效的整数`
)

技术细节

1. 输入值处理：

   • .input 属性始终保留验证管道开始时的原始值
   • .received 属性反映当前验证步骤接收到的值
   • 在包含 transform 的管道中，.input 也会被更新为转换后的值

2. 字符串格式化：

   • Valibot 内部使用 _stringify 方法统一格式化显示值
   • 字符串类型会自动添加引号
   • 其他类型保持原始表示

最佳实践

1. 对于简单验证，优先使用 .input 获取原始值
2. 对于包含数据转换的场景，考虑使用 custom 验证器
3. 在错误信息中保持一致的格式化风格
4. 对于需要精确控制错误信息的场景，可以组合使用多种验证策略

总结

Valibot 提供了灵活的方式来控制验证过程中的错误信息生成。理解 .input 和 .received 的区别以及它们在不同验证场景中的行为，可以帮助开发者创建更精确、用户友好的验证错误提示。对于复杂的数据转换验证，采用 custom 验证器通常是更可靠的选择。