是的条件验证取决于另一个字段是否有效？

Question

我正在做一个项目，该项目有一个用 MUI、react-hook-forms 和 yup 制作的长注册表单。一次会呈现一个带有“下一步”按钮的字段，以将显示的输入字段更改为下一个（即从电子邮件字段转到名称字段）。现在它不允许我提交电子邮件字段并显示名称字段，因为它想要验证这两个字段，因为没有条件验证。我有以下架构：

const schema = yup.object().shape({
  email: yup.string().email().required(),
  firstName: yup.string().required("Please enter your first name"),
});

根据我在网上阅读的内容，我了解到我需要对 firstName 字段使用 .when 方法，但我不知道如何根据电子邮件字段是否有效进行检查。我尝试了以下方法：

const schema = yup.object().shape({
  email: yup.string().email().required(),
  firstName: yup.string().when("email", {
    is: (value) => value !== undefined,
    then: yup.string().required("Please enter your first name"),
    otherwise: yup.string().notRequired(),
  }),
});

但是该值是在 onChange 上定义的，所以它不起作用。

Answer 1

我明白了。我将主模式分为emailSchema和nameSchema，然后根据注册的步骤（1是名字字段的步骤）使用concat方法。

const schema = step === 1 ? emailSchema.concat(nameSchema) : emailSchema

是的条件验证取决于另一个字段是否有效？

Yup conditional validation depending on if another field is valid?

javascript

reactjs

yup

react-hook-form