使用Formik与Yup实现两个表单字段值相等校验的问题求助

问题根因 #

你当前的oneOf写法本身逻辑是正确的，之所以没生效，核心是Yup默认仅在字段自身值变动时触发校验，修改原邮箱字段时，确认邮箱字段不会自动重新执行匹配校验，就会出现值已经一致但仍报错的问题。

可用实现方案 #

方案1：用test显式声明依赖（更稳定，推荐Yup v1+版本使用） #

直接通过test方法的依赖配置指定绑定原邮箱字段，这样原邮箱修改时会自动触发确认邮箱的校验，逻辑更可控：

const validationSchema = yup.object().shape({
  email: yup
    .string()
    .email("*Must be a valid email address")
    .required("*Email is required"),
  emailConfirmed: yup
    .string()
    .required("*Confirm your email")
    .test(
      "email-match",
      "Email must match",
      function (value) {
        // 此处不要用箭头函数，方便通过this.parent获取同级别字段值
        return value === this.parent.email;
      }
    )
}, [
  // 显式声明校验依赖，修改email时自动触发emailConfirmed的校验
  ["email", "emailConfirmed"]
]);

如果是密码与确认密码的校验场景，直接替换字段名即可，逻辑完全通用。

方案2：保留oneOf写法，补充校验触发逻辑 #

如果不想改现有oneOf逻辑，可以在邮箱输入框的变化事件里手动触发确认邮箱的校验：

// 在Formik的email输入组件上修改onChange回调
onChange={(e) => {
  formik.handleChange(e);
  // 手动触发确认邮箱字段校验
  formik.validateField('emailConfirmed');
}}

注释when逻辑说明 #

你代码里注释的when写法本身逻辑正确，作用是仅当邮箱字段有值时才要求确认邮箱必填，可以直接和上面的匹配校验叠加使用，不会产生冲突。

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