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

Posted 2023-02-21

【中文标题】使用 Formik 和 Yup 验证 2 个字段是不是相等

【英文标题】：Validating that 2 fields are equal with Formik and Yup使用 Formik 和 Yup 验证 2 个字段是否相等

【发布时间】：2021-12-31 03:43:18

【问题描述】：

我刚开始使用 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

有人可以帮忙吗？

【参考方案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()
  );

【讨论】：

谢谢！愚蠢的错字。我盯着这个看了一天，觉得是的，我不理解有些事情