Formik结合Yup条件校验时空字段不显示错误问题排查

1. Yupwhen语法使用不规范：你在then分支中直接新建独立的yup.string()实例，没有基于当前字段的已有schema做链式扩展，同时缺失otherwise分支声明，会导致条件命中时校验规则无法正确合并，条件不命中时字段处于无约束的透传状态。
2. 空字符串无法触发默认必填校验：Yup的string().required()默认仅对null、undefined值抛出必填错误，空字符串""、全空格字符串会被判定为合法字符串值，自然不会弹出错误提示。
3. 缺少校验触发时机配置：Formik默认不会在组件挂载、tab值变化时自动重新执行全量校验，就算规则正确，切换tab后也不会及时更新错误提示。

1. 修正Yup校验Schema #

调整when的写法，用回调函数接收当前schema后链式追加规则，补上otherwise分支，同时增加值转换逻辑，把空串/全空格字符串转为null让必填规则可以识别：

const validationSchema = yup.object().shape({
  tab: yup.string().oneOf(["auto", "manual"]).required(),
  tracking_number: yup.string()
    // 去除首尾空格，空值转为null，让required规则可以识别空输入
    .transform(value => value?.trim() ? value.trim() : null)
    .when("tab", {
      is: "manual",
      then: (schema) => schema.required("请输入物流单号"),
      otherwise: (schema) => schema.notRequired()
    }),
  recipient_name: yup.string()
    .transform(value => value?.trim() ? value.trim() : null)
    .when("tab", {
      is: "auto",
      then: (schema) => schema.required("请输入收件人姓名"),
      otherwise: (schema) => schema.notRequired()
    })
})

2. 调整Formik配置与tab切换逻辑 #

给Formik加上validateOnMount属性让首屏就执行校验，切换tab时手动触发全量校验，保证错误提示随规则切换及时更新：

<Formik
  initialValues={{
    tab: "auto",
    tracking_number: "",
    recipient_name: contact_name || "",
  }}
  validationSchema={validationSchema}
  validateOnMount // 首屏加载即触发校验
  onSubmit={handleOnChange}
>
  {({ setFieldValue, validateForm }) => {
    // 自定义tab切换方法
    const handleTabSwitch = async (tabKey) => {
      await setFieldValue("tab", tabKey);
      validateForm(); // tab切换后重新执行全量校验
    }

    return (
      <Form>
        {/* 选项卡点击时调用handleTabSwitch传入对应key即可 */}
        {/* 其余表单项、错误提示按原有逻辑编写 */}
      </Form>
    )
  }}
</Formik>

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