2

我有以下架构

validationSchema={yup.object().shape({
  firstName: yup
    .string()
    .required("Name cannot be empty")
    .matches(NAME_REGEX, "Name can only contain english characters"),
  lastName: yup
    .string()
    .required("Name cannot be empty")
    .matches(NAME_REGEX, "Name can only contain english characters"),
  location: yup
    .object()
    .nullable()
    .shape({
      country: yup.string().required(),
      state: yup.string().required(),
      city: yup.string().required()
    })
})}

firstName和的验证lastName工作正常,但我不知道如何验证location.
要求location完全不需要填写。但是,如果填写了任何(country/ statecity)字段,则必须填写所有三个字段。要么全部,要么没有。

尽管我尝试按上述方式验证它,但它不起作用。

另一个验证要求是:这些值是从selecthtml 元素中选择的,其中第一个<option><option key={0}>-select-</option>. 因此,我不希望我的用户也选择此选项。到目前为止,我正在onSubmit通过检查值来处理它,如果它们包含,-select-那么这些值将不被考虑,并将被现有的值替换。

更新
location永远不能为空。如果用户没有设置任何位置字段,那么也location将是:

location: {
   country: null,
   state: null,
   city: null
}

location永远不能为空,只有它的属性可以。

我应该如何进行这些验证?

4

1 回答 1

3

您必须使用mixed.default(value)location将默认值设置为 null,如下所示:

location: yup
    .object()
    .default(null)
    .nullable()
    .shape({
      country: yup.string().required(),
      state: yup.string().required(),
      city: yup.string().required()
    })

更新:

location 永远不能为空,只有它的属性可以。

你可以这样做:

location: object()
    .shape({
      country: string().default(null).nullable().test(
        value => value === null || value,
      ),
      state: string().default(null).nullable().test(
        value => value === null || value,
      ),
      city: string().default(null).nullable().test(
        value => value === null || value,
      )
    })
于 2019-05-04T15:29:06.047 回答