Vee-Validate 中 Yup 默认值与字段删除功能解析

问题背景

在使用 Vee-Validate 的表单验证库时，开发者经常会配合 Yup 进行表单验证规则的设定。一个常见的需求是为表单字段设置默认值，以及在提交时删除某些不需要的字段。然而，在组件式 API 中使用时，开发者可能会遇到 Yup 的 .default() 和 .strip() 方法失效的问题。

核心问题分析

默认值设置失效

在组件式 API 中，直接使用 Yup 的 .default() 方法为字段设置默认值时，这些值不会自动填充到表单输入框中。这是因为 Vee-Validate 需要明确的初始值传递机制。

字段删除功能失效

同样地，使用 Yup 的 .strip() 方法期望在表单提交时移除特定字段，但发现这些字段仍然出现在最终提交的数据中。

解决方案

使用 toTypedSchema 转换器

Vee-Validate 提供了 toTypedSchema 工具函数，专门用于将 Yup 模式转换为 Vee-Validate 能够正确处理的类型化模式。这个转换器不仅能解决默认值问题，还能使 .strip() 方法正常工作。

import { toTypedSchema } from '@vee-validate/yup';
import * as yup from 'yup';

const formSchema = toTypedSchema(
  yup.object({
    name: yup.string().default('默认姓名'),
    age: yup.number().strip()
  })
);

初始值传递机制

虽然 toTypedSchema 解决了默认值的问题，但开发者仍需理解 Vee-Validate 的表单初始值机制：

1. 表单的初始值可以通过 <Form> 组件的 initial-values 属性显式设置
2. 当 initial-values 未提供时，toTypedSchema 转换后的 Yup 模式中的 .default() 值才会生效
3. 两者结合使用时，initial-values 会覆盖 Yup 中的默认值

最佳实践建议

1. 明确区分初始值和默认值：初始值代表表单加载时的具体值，默认值则是当没有提供初始值时的后备值。

2. 合理使用字段删除：.strip() 方法只影响最终提交的数据，不会影响表单的显示和验证过程。

3. 类型安全：使用 TypeScript 时，toTypedSchema 还能提供更好的类型推断和代码提示。

4. 组合使用：可以同时使用 initial-values 和 Yup 默认值，前者用于动态初始值，后者作为静态后备。

实现示例

// 表单组件中使用
<Form :validation-schema="formSchema">
  <Field name="name" />
  <Field name="age" type="number" />
</Form>

// 脚本部分
import { toTypedSchema } from '@vee-validate/yup';
import * as yup from 'yup';

const formSchema = toTypedSchema(
  yup.object({
    name: yup.string().default('匿名用户'),
    email: yup.string().email().required(),
    temporaryField: yup.string().strip()
  })
);

通过这种方式，开发者可以更灵活地控制表单的初始状态和最终提交数据，同时保持代码的清晰和可维护性。