如果其中任何一个有值，则使用 Yup 制作多个 Formik 字段

Question

我有一个使用 Yup 验证的 Formik 表单。我的问题是所有三个字段，让我们称它们为 Field1、Field2 和 Field3（都是字符串），默认情况下都是可选的，但如果有任何一个，则它们都是必需的已填写。

我的 validationSchema 应该是什么样子才能完成这项工作

我已经有了另外两个字段的起点，如果一个已经填写，另一个就不再需要了，但是其中一个必须一直填写，它看起来像这样：

field4: Yup.string()
            .ensure()
            .when('field5', {
                is: '',
                then: Yup.string().required('Please fill out Field4 or Field5'),
            }),
field5: Yup.string()
            .ensure()
            .when('field4', {
                is: '',
                then: Yup.string().required(''),
            }),

Answer 1

在 yup 中，您可以像使用 field4 和 field5 一样使用 when 根据其他值进行检查。而且你还可以同时收听多个场

你必须小心循环依赖

有一些使用参数 noSortEdges 的解决方案，但没有太多关于它的文档。你可以找到它的测试 here.

所以一个可能的解决方案是：

const schema = yup.object().shape(
  {
    field1: yup.string().when(["field2", "field3"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    }),
    field2: yup.string().when(["field1", "field3"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    }),
    field3: yup.string().when(["field1", "field2"], {
      is: (a, b) => a !== undefined || b !== undefined,
      then: yup.string().required("Please fill out Field1, Field2 or Field3")
    })
  },
  [["field1", "field2"], ["field1", "field3"], ["field2", "field3"]]
);

如果其中任何一个有值，则使用 Yup 制作多个 Formik 字段

Make multiple Formik-fields required with Yup if any of them have a value

javascript

validation

typescript

reactjs

yup