Valibot 中字符串数值比较的注意事项

Valibot 是一个强大的 TypeScript 数据验证库，但在处理字符串形式的数值比较时，开发者需要注意一些关键细节。本文将深入探讨字符串比较的特殊性以及在 Valibot 中正确处理数值范围验证的方法。

字符串比较的本质问题

当开发者尝试使用 minValue 和 maxValue 验证器对字符串形式的数值进行范围检查时，可能会遇到意外的验证失败。这是因为字符串比较是基于字典顺序而非数值大小进行的。

例如，字符串 "100" 实际上小于 "50"，因为在字典序中字符 '1' 排在 '5' 前面。这与数值比较的结果完全相反，导致验证行为与预期不符。

解决方案比较

1. 转换为数值类型

最直接的方法是将输入字符串转换为数值类型后再进行验证：

const schema = transform(
  coerce(number([minValue(0), maxValue(100)]), Number),
  String
);

这种方法先使用 coerce 将字符串转换为数字，进行数值范围验证，最后再转换回字符串。虽然有效，但在某些集成场景（如与表单库配合使用时）可能需要额外处理。

2. 添加前导零统一格式

另一种方法是确保所有比较的字符串具有相同长度：

const schema = string([
  decimal(),
  minLength(3),
  toCustom(input => input.padStart(3, '0')),
  minValue('0'),
  maxValue('100')
]);

这种方法通过填充前导零使所有字符串长度一致，确保字典序比较结果与数值比较一致。但需要注意最大值的位数限制。

3. 自定义验证逻辑

对于更复杂的需求，可以使用 custom 验证器实现特定逻辑：

const schema = string([
  decimal(),
  custom(input => {
    const number = parseInt(input);
    return number >= 0 && number <= 100;
  })
]);

这种方法灵活性最高，可以完全控制验证逻辑，但需要开发者自行处理所有边界情况。

最佳实践建议

1. 优先使用数值类型：如果业务逻辑允许，直接使用 number 类型进行验证是最可靠的方式：

const schema = number([integer(), minValue(0), maxValue(100)]);

2. 明确数据类型语义：在设计 API 或表单时，明确区分字符串和数值的语义，避免混用带来的混淆。

3. 考虑前后端一致性：确保前端验证逻辑与后端处理逻辑对数据类型的理解一致，防止因类型转换导致的边界问题。

总结

Valibot 提供了多种方式来处理字符串形式的数值验证，开发者应根据具体场景选择最适合的方法。理解字符串比较与数值比较的根本差异是避免此类问题的关键。在大多数情况下，使用正确的数据类型而非字符串形式来表示数值，能够显著减少验证复杂度并提高代码可维护性。