Yup 模式中的可选字段验证

Question

我正在使用react-hook-formwithyup进行表单验证，并希望某些字段是可选的（空）。

按照他们的文档，我正在使用nullable()，optional()但它仍在验证中：

export const updateAddressSchema = yup.object({
  address: yup
    .string()
    .nullable()
    .optional()
    .min(5, "Address must be more than 5 characters long")
    .max(255, "Address must be less than 255 characters long"),
  city: yup
    .string()
    .nullable()
    .optional()
    .max(32, "City name must be less than 32 characters long"),
  postal_code: yup
    .string()
    .nullable()
    .optional()
    .length(10, "Postal code must be 10 characters long"),
  phone: yup
    .string()
    .nullable()
    .optional()
    .min(10, "Phone number must be more than 10 characters long")
    .max(20, "Phone number must be less than 20 characters long"),
});

有什么正确的方法可以做到这一点吗？

Answer 1

您需要使用.when如下所示的条件验证。我只添加了并且address仅city，您可以像这样添加其他内容。

export const updateAddressSchema = yup.object().shape({

  address: yup.string().when("address", (val, schema) => {
       if(val?.length > 0) {  //if address exist then apply min max else not
          return yup.string().min(5, "min 5").max(255, "max 255").required("Required");
       } else { 
          return yup.string().notRequired();
       }
  }),

  city: yup.string().when("city", (val, schema) => {
       if(val?.length > 0) {
          return yup.string().max(32, "max 32").required("Required");
       }
       else { 
          return yup.string().notRequired();
       }
  }),
  
 }, [
     ["address", "address"], 
     ["city", "city"], 
    ]                   //cyclic dependency
 );

另外，还需要添加循环依赖

Answer 2

非常感谢@Usama 的回答和解决方案！

在使用他们的解决方案时，我遇到了另一个问题。如果提交空值，我的后端 API 会忽略空值并返回之前的值。问题是，在初始渲染时，文本字段的值为空，但在选择并键入然后删除键入的字母以使其再次为空（不提交）之后，其值将更改为空字符串，因此我的 API 会抛出错误并且不会更新用户信息。

我设法修复它的方法是，如果文本字段未填充，则使用yups方法将类型从空字符串转换为 null：.transform()

export const updateAddressSchema = yup.object().shape(
  {
    address: yup.string().when("address", (value) => {
      if (value) {
        return yup
          .string()
          .min(5, "Address must be more than 5 characters long")
          .max(255, "Address must be less than 255 characters long");
      } else {
        return yup
          .string()
          .transform((value, originalValue) => {
            // Convert empty values to null
            if (!value) {
              return null;
            }
            return originalValue;
          })
          .nullable()
          .optional();
      }
    }),
    ......................
  },
  [
    ["address", "address"],
    ......................,
  ]
);

我真的希望这对某人有帮助。