Yup 模式中的可选字段验证

Question

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

根据他们的文档，我正在使用 nullable() and 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) {  
        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();
       }

     } else {
          return yup.string().notRequired();
     }
  }),

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

此外，您需要添加Cyclic dependency

Answer 2

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

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

我设法修复它的方法是使用 yup 的 .transform() 方法在文本字段未填充的情况下将类型从空字符串转换为 null:

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"],
    ......................,
  ]
);

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

Yup 模式中的可选字段验证

Optional field validation in Yup schema

html

javascript

validation

reactjs

yup