时间戳

首页 > 解决方案 > Formik + yup：如何验证一个位置模式，其中字段（国家、州、城市）不是强制性的，但如果一个被填写，每个都应该填写？

reactjs - Formik + yup：如何验证一个位置模式，其中字段（国家、州、城市）不是强制性的，但如果一个被填写，每个都应该填写？

问题描述

我有以下架构

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/ state，city）字段，则必须填写所有三个字段。要么全部，要么没有。

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

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

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

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

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

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

标签： reactjsformikyup

解决方案

您必须使用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,
      )
    })

推荐阅读