Valibot 中处理字符串数值输入的验证与转换技巧

理解问题场景

在表单开发中，我们经常会遇到需要处理数值输入的情况。虽然 HTML5 提供了 type="number" 的输入框类型，但出于多种考虑（如更好的移动端体验、更灵活的输入控制等），开发者有时会选择使用 type="text" 来接收数值输入。这就带来了一个挑战：如何在保持前端输入灵活性的同时，在后端验证和数据处理时确保数值的正确性。

Valibot 的解决方案

Valibot 作为一个强大的数据验证库，提供了多种工具来处理这种场景。核心思路是：

1. 首先验证输入确实是字符串类型
2. 然后验证字符串内容符合数值格式要求
3. 最后将有效的字符串数值转换为真正的数值类型

基本数值处理

对于一般的数值输入（包括小数），可以使用以下验证链：

import * as v from 'valibot';

const NumberSchema = v.pipe(
  v.string(),          // 确保输入是字符串
  v.decimal(),         // 验证字符串是有效的十进制数
  v.transform(Number), // 将字符串转换为数值
  v.minValue(10),      // 可选：添加最小值约束
  v.maxValue(20)       // 可选：添加最大值约束
);

处理整数输入

如果需要确保输入是整数，可以在转换后添加 integer() 验证：

const IntegerSchema = v.pipe(
  v.string(),
  v.decimal(),
  v.transform(Number),
  v.integer(),        // 确保是整数
  v.minValue(10),
  v.maxValue(20)
);

日期输入的处理

类似的模式也适用于日期输入。HTML 的 type="date" 输入会返回 ISO 格式的字符串，我们可以这样处理：

const DateSchema = v.pipe(
  v.string(),
  v.isoDate(),                  // 验证是有效的 ISO 日期字符串
  v.transform(input => new Date(input)) // 转换为 Date 对象
);

实现原理分析

这种验证链的设计体现了 Valibot 的几个核心特性：

1. 管道式验证：通过 v.pipe 将多个验证器串联起来，形成清晰的验证流程
2. 类型转换：transform 方法允许在验证过程中改变数据类型
3. 渐进式验证：先验证基本类型，再验证具体格式，最后应用业务规则

最佳实践建议

1. 明确区分验证和转换：先完成所有格式验证，再进行类型转换
2. 提供清晰的错误信息：考虑为每个验证步骤添加自定义错误提示
3. 考虑边界情况：处理空字符串、前后空格等特殊情况
4. 性能考虑：对于高频使用的验证规则，可以考虑预编译schema

通过这种模式，开发者可以在保持前端输入灵活性的同时，确保后端数据的准确性和一致性，是处理表单输入的理想解决方案。