如何在Yup验证后将Formik表单字段值转为空字符串？

你需要实现的逻辑是：字段默认必填，但当值为notRequired时，将其转为空字符串提交，且无需必填验证。你的两种写法因顺序或逻辑问题无效，以下是修正方案及问题分析：

原写法问题说明 #

• 第一种写法错误：required规则在transform前执行，验证的是原始值而非转换后的值。当值为notRequired时，required会通过（原始值是非空字符串），但转换后的值为空，这不符合你“值为notRequired时设为可空”的核心需求——你需要的是此时无需必填验证，而非通过验证后再转空。
• 第二种写法错误：when的回调参数并非字段值，而是Yup schema实例；同时依赖自身字段value时，逻辑判断时机不对，无法正确触发条件规则。

正确方案1：transform+test组合（推荐，逻辑清晰） #

Yup.object().shape({
  value: Yup.string()
    // 基于原始值转换：将'notRequired'转为空字符串，其他值保持不变
    .transform((value, originalValue) => {
      return originalValue === 'notRequired' ? '' : value;
    })
    // 允许字段最终值为空字符串
    .nullable()
    // 自定义条件验证：仅当原始值不是'notRequired'时，要求值非空
    .test(
      'required-if-not-special-value',
      'general.input.error.required',
      (value, context) => {
        const originalValue = context.originalValue;
        // 两种情况通过验证：1. 原始值是'notRequired'；2. 原始值非特殊值且当前值非空
        return originalValue === 'notRequired' || !!value;
      }
    )
});

该方案逻辑：

1. transform优先处理值转换，确保后续验证基于转换后的数据
2. .nullable()允许字段最终为空
3. test方法精准控制验证规则，完全匹配你的业务需求

正确方案2：transform+when组合 #

Yup.object().shape({
  value: Yup.string()
    .transform((value, originalValue) => {
      return originalValue === 'notRequired' ? '' : value;
    })
    // 基于转换后的值动态应用规则
    .when('value', {
      is: (val) => val !== '', // 转换后的值不为空（原始值非'notRequired'）
      then: (schema) => schema.required('general.input.error.required'), // 强制必填
      otherwise: (schema) => schema.nullable().optional() // 允许为空
    })
});

该方案通过when根据转换后的值动态切换验证规则，实现条件必填的效果。

Formik会自动使用Yup转换后的值提交，无需额外手动处理。

内容的提问来源于stack exchange，提问作者steffcarrington