Yup模式中的可选字段验证

Question

我使用react-hook-form与yup为我的表单验证，并希望一些字段是可选的(null)。

根据他们的文档，我使用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会抛出一个错误，不会更新用户信息。

我设法解决这个问题的方法是使用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"],
......................,
]
);

我真的希望这能帮助到别人。