使用 Formik 和 Yup 验证 2 个字段是否相等

Question

我刚开始使用 Formik 和 Yup。我正在尝试验证 2 个字段是否相等，例如电子邮件和密码字段。我不知道如何进行自定义验证。我尝试了 oneOf、test 和 when。该文档不是很广泛

 const validationSchema = yup.object().shape({
    email: yup
      .string()
      .email("*Must be a valid email address")
      .required("*Email is required"),
    emailConfirmed: yup
      .string()
      .oneOf([yup.ref("email"), null], "Email must match")
      .required()
    // .when('email', {
    //     is: (val:string)=>{console.log("email is ", val); return !!val;},
    //     then: yup.string().required("*Confirm your email")
    // })
    // .test('email-equals', 'Please re-enter your email to confirm', (value, context) => {
    //     console.log('validating email', value, context.parent.email, (value === context.parent.email));
    //     return value === context.parent.email;
    // })
  });

  const onSubmit = (values: any) => {
    console.log("Submitting", values);
  };

代码在这里：https://codesandbox.io/s/modest-smoke-gcujz

有人可以帮忙吗？

Answer 1

您需要将对象中的变量名称从 emailConfirmed 更新为 confirmEmail。基本上是的无法在您的表单中找到输入的 emailConfirmed 名称。这就是为什么它没有显示任何错误。现在您更新的 yup 架构将如下所示。

const validationSchema = yup.object().shape({
    email: yup
      .string()
      .email("*Must be a valid email address")
      .required("*Email is required"),
    confirmEmail: yup
      .string()
      .oneOf([yup.ref("email"), null], "Email must match")
      .required()
  });

使用 Formik 和 Yup 验证 2 个字段是否相等

Validating that 2 fields are equal with Formik and Yup

reactjs

yup

formik