使用 Yup 的条件 Formik 表单验证

Question

我有一个表单字段（形状），当它旁边的两个其他字段（颜色和大小）中至少有一个被填写时，应该需要它。我试过使用逻辑或 (||) 运算符，但它似乎不起作用。目前，shapes 字段只依赖于 colors 字段；但是，如果我要在 OR 条件下切换 'colors' 和 'sizes' 的位置，则 shapes 字段将仅依赖于 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 条件的方式是问题所在。如果有人能帮助我理解为什么我上面的代码没有按照我想要的方式工作，我将不胜感激。

Answer 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']);

使用 Yup 的条件 Formik 表单验证

Conditional Formik Form Validation Using Yup

javascript

yup

formik