使用 Yup 的条件 Formik 表单验证答案

【问题标题】：Conditional Formik Form Validation Using Yup使用 Yup 的条件 Formik 表单验证
【发布时间】：2021-06-09 21:21:04
【问题描述】：

我有一个表单字段（形状），当填写旁边的其他两个字段（颜色和尺寸）中的至少一个时，它应该是必需的。我尝试过使用逻辑 OR (||) 运算符，但它似乎不起作用。目前，形状字段仅依赖于颜色字段；但是，如果我要在 OR 条件下切换 'colors' 和 'sizes' 的位置，则形状字段仅取决于尺寸字段。

这是我的代码目前的样子：

const formSchema = Yup.object().shape({
  colors: Yup.string().when('sizes', {
    is: (value) => Boolean(value),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
  sizes: Yup.string().when('colors', {
    is: (value) => Boolean(value),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
  shapes: Yup.string().when('colors' || 'sizes', {
    is: (value) => Boolean(value),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
}, ['colors', 'sizes']);

我有一种预感，我为形状构建 OR 条件的方式是个问题。如果有人能帮助我理解为什么上面的代码没有按照我想要的方式工作，我将不胜感激。

【问题讨论】：

'colors' || 'sizes' 与 'colors' 相同。请参阅documentation。我不熟悉是的，所以我不知道正确的语法是什么。

标签： javascript formik yup

【解决方案1】：

以下代码实现了我之前的尝试：

const formSchema = Yup.object().shape({
  colors: Yup.string().when('sizes', {
    is: (value) => Boolean(value),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
  sizes: Yup.string().when('colors', {
    is: (value) => Boolean(value),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
  shapes: Yup.string().when(['colors', 'sizes'], {
    is: (colors, sizes) => Boolean(colors) || Boolean(sizes),
    then: Yup.string().required,
    otherwise: Yup.string().nullable(),
  }),
}, ['colors', 'sizes']);

【讨论】：