Yup条件验证问题：复选框勾选时邮箱字段必填实现报错

我懂你这种踩坑的感觉——明明思路对，但就是跑不起来还报错。你的需求很明确：复选框选中时显示邮箱，且此时邮箱为必填；未选中时邮箱不用填也不验证。你用when的方向是对的，但写法上有两个关键细节没处理好，导致Formik和Yup报错。

正确的验证Schema写法 #

const validationSchema = yup.object().shape({
  // 第一步：必须先定义依赖的布尔字段showEmail
  showEmail: yup.boolean(),
  email: yup
    .string()
    .email('请输入有效的邮箱地址')
    .label('Email')
    .when('showEmail', {
      is: true,
      // 第二步：用函数接收schema，链式调用required，不要重新创建yup.string()
      then: (schema) => schema.required('必须填写邮箱地址'),
      // 可选：取消勾选时清除邮箱的验证要求（比如用户之前填了邮箱也不会报错）
      else: (schema) => schema.notRequired()
    }),
});

为什么你的原代码会报错？ #

1. 缺少依赖字段的定义：你没在Schema里声明showEmail这个布尔字段，Yup无法找到这个依赖项，就会抛出类似“找不到字段showEmail”的错误。
2. 错误的then写法：你在then里重新写了yup.string().required(...)，这会覆盖之前的email()和label()配置，导致Schema上下文混乱，Formik无法正确关联字段的验证规则，进而报错。

额外注意事项 #

• 如果你的showEmail字段有默认值（比如初始是false），可以在Schema里加上defaultValue: false，确保验证逻辑从一开始就正常工作：

  showEmail: yup.boolean().default(false),
  

• 确保Formik表单里正确绑定了showEmail复选框和email输入框的name属性，和Schema里的字段名完全一致，不然验证逻辑也不会生效。

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