表单示例

📦 内置转换器

姓名（自动去除首尾空格）

💡 使用 Transformers.trim

邮箱（自动转小写 + 去空格）

💡 组合使用 trim + toLowerCase

年龄（字符串 → 数字）

💡 使用 Transformers.toNumber，实际存储: string

✨ 自定义转换器

用户名（仅小写字母、数字、-_）

💡 自动转小写、移除特殊字符、限制20字符

手机号（自动格式化）

💡 自动格式化为 138-1234-5678

信用卡号（自动分组）

💡 自动格式化为 1234 5678 9012 3456

价格（保留2位小数）

💡 自动保留2位小数

网站（自动添加协议）

💡 自动添加 https:// 并转小写

🔗 组合转换器

个人简介（去空格 + 限制长度）

💡 组合 trim + 自定义长度限制（200字符） 0 / 200

👁️ 实时转换预览

用户名: (空)

手机号: (空)

信用卡: (空)

价格: (空)

网站: (空)

📖 实现代码

1. 使用内置转换器

const form = useFormState({
  fields: {
    email: {
      // 组合多个转换器
      transformer: Transformers.compose(
        Transformers.trim,
        Transformers.toLowerCase
      ),
      validator: Validators.email()
    },
    age: {
      // 字符串转数字
      transformer: Transformers.toNumber,
      validator: Validators.min(1)
    }
  }
});

2. 创建自定义转换器

const phoneFormatter: ITransformer<string, string> = {
  transform: (value: string) => {
    const digits = value.replace(/\D/g, '');
    if (digits.length <= 3) return digits;
    if (digits.length <= 7)
      return `${digits.slice(0,3)}-${digits.slice(3)}`;
    return `${digits.slice(0,3)}-${digits.slice(3,7)}-${digits.slice(7,11)}`;
  }
};

// 使用
const form = useFormState({
  fields: {
    phone: {
      transformer: phoneFormatter
    }
  }
});

3. 组合转换器

const form = useFormState({
  fields: {
    bio: {
      transformer: Transformers.compose(
        Transformers.trim,
        // 内联自定义转换器
        {
          transform: (value: string) => value.slice(0, 200)
        }
      )
    }
  }
});

📦 内置转换器

Transformers.trim 去除首尾空格
Transformers.toUpperCase 转大写
Transformers.toLowerCase 转小写
Transformers.toNumber 字符串转数字
Transformers.compose(...) 组合多个转换器

🎯 常见使用场景

格式化：电话号码、信用卡、日期、货币
规范化：邮箱、URL、用户名
清理：去空格、移除特殊字符
限制：字符长度、数值范围
类型转换：字符串→数字、日期解析

💡 最佳实践

转换器应该是纯函数（无副作用）
转换在setValue时立即执行，用户看到的是转换后的值
转换器只处理格式，验证器负责校验
使用compose组合多个简单转换器
转换器应该幂等（重复执行结果相同）

值转换器示例

表单示例

📦 内置转换器

✨ 自定义转换器

🔗 组合转换器

👁️ 实时转换预览

📖 实现代码

1. 使用内置转换器

2. 创建自定义转换器

3. 组合转换器

📦 内置转换器

🎯 常见使用场景

💡 最佳实践