javascript - 如果在 yup Schema 验证中任何字段非空，则不需要任何字段或需要所有字段

Question

场景:我有 4 个字段，我想使用 Yup 验证模式进行验证

• 假设如果用户为上述 1 个字段中的任何一个输入值，则必须要求其他 3 个

• 如果用户没有为 4 个字段中的任何一个输入值，则不需要任何字段

• 因此我想说的是，如果所有字段都为空，则不需要任何字段，假设任何一个字段非空，那么所有字段都是必填的!

我试过的解决方案

const validationSchema = Yup.object({
  field1: Yup.mixed().when(["field2", "field3", "field4"], {
    is: (...fields) => fields.some(Boolean),
    then: Yup.mixed().required(),
    otherwise: Yup.mixed().notRequired()
  }),
  field2: Yup.mixed().when(["field1", "field3", "field4"], {
    is: (...fields) => fields.some(Boolean),
    then: Yup.mixed().required(),
    otherwise: Yup.mixed().notRequired()
  }),
  field3: Yup.mixed().when(["field2", "field1", "field4"], {
    is: (...fields) => fields.some(Boolean),
    then: Yup.mixed().required(),
    otherwise: Yup.mixed().notRequired()
  }),
  field4: Yup.mixed().when(["field2", "field3", "field1"], {
    is: (...fields) => fields.some(Boolean),
    then: Yup.mixed().required(),
    otherwise: Yup.mixed().notRequired()
  })
});

我得到的错误

• 循环依赖，节点为:"field4"

Answer 1

这个问题在写这个答案时已有一个多月了，但也许它可以帮助某人或至少为他们指明正确的方向。

我遇到了循环问题，但我有三个字段。我不想输入任何字段，或者三个字段都必须输入。

此链接:https://github.com/jquense/yup/issues/176#issuecomment-369925782帮助但对我不起作用。但经过一些调整后，我让它工作了；这对我有用。

const SettingsSchema = Yup.object().shape({
    password: Yup.string().ensure()
      .when(['new_password', 'confirm_password'], {
        is: (new_password, confirm_password) => new_password !== '' || confirm_password !== '',
        then: (SettingsSchema) => SettingsSchema.required(t('Password is required.')),
      }),
    new_password: Yup.string().ensure()
      .when(['password', 'confirm_password'], {
        is: (password, confirm_password) => password !== '' || confirm_password !== '',
        then: (SettingsSchema) => SettingsSchema.required(t('New Password is required.'))
          .min(8, t('Password cannot be shorted than 8 characters.')),
      }),
    confirm_password: Yup.string().ensure()
      .when(['password', 'new_password'], {
        is: (password, new_password) => password !== '' || new_password !== '',
        then: (SettingsSchema) => SettingsSchema.required(t('Confirm Password is required.'))
          .oneOf([Yup.ref('new_password')], t('New Password and Confirm Password must match.')),
      }),
  }, [['password', 'new_password'], ['password', 'confirm_password'], ['new_password', 'confirm_password']]);

消除循环错误并使验证工作所需的是:

• shape 的最后一个参数是一个包含对数组的数组。

在撰写本文时，关于该部分的文档还不是很清楚。 https://github.com/jquense/yup#objectshapefields-object-nosortedges-arraystring-string-schema

注意事项:

1. 在每个字段上，我调用 .ensure()。这确保如果值为 undefined 或 null，它们将被转换为空字符串。
2. 因为您有四个字段，所以您需要在字段对数组中添加一对作为shape 的最后一个参数。

所以我认为你上面的例子可以重写为:

const schema = Yup.object().shape({
  field1: Yup.mixed().ensure().when(["field2", "field3", "field4"], {
    is: (field2, field3, field4) => field2 !== '' || field3 !== '' || field4 !== '',
    then: (schema) => schema.required(),
    otherwise: (schema) => schema.notRequired()
  }),
  field2: Yup.mixed().ensure().when(["field1", "field3", "field4"], {
    is: (field1, field3, field4) => field1 !== '' || field3 !== '' || field4 !== '',
    then: (schema) => schema.required(),
    otherwise: (schema) => schema.notRequired(),
  }),
  field3: Yup.mixed().ensure().when(["field1", "field2", "field4"], {
    is: (field1, field2, field4) => field1 !== '' || field2 !== '' || field4 !== '',
    then: (schema) => schema.required(),
    otherwise: (schema) => schema.notRequired(),
  }),
  field4: Yup.mixed().ensure().when(["field1", "field2", "field3"], {
    is: (field1, field2, field3) => field1 !== '' || field2 !== '' || field3 !== '',
    then: (schema) => schema.required(),
    otherwise: (schema) => schema.notRequired(),
  })
}, [["field1", "field2"], ["field2", "field3"], ["field3", "field4"], ["field1", "field4"]]);

我知道这个包含三个字段的示例在我的代码中使用时是有效的。四个参数的例子是从三个参数的例子推导出来的，我没有测试，所以我不确定是否完全正确。