Question

我正在尝试对表单字段/选择实施相当基本的验证。验证模式：

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup.number().notRequired()
}),

我想做什么：如果reserveVehicle是provider.hasReserve，则仅需要/验证true。否则，不需要号码。我收到此错误：

“ reserveVehicle必须为number类型，但最终值为：NaN（从值NaN开始广播）。”

这很有道理，因为null不是数字。但是，由于我试图告诉它它不是必需的，所以我认为它不应试图对其进行评估。

我是否错过了Yup的任何关键概念？

Answer 1

您应该使用 typeError

这是我代码中的一个示例：

amount: Yup.number()
                    .typeError('Amount must be a number')
                    .required("Please provide plan cost.")
                    .min(0, "Too little")
                    .max(5000, 'Very costly!')

Answer 2

由于您希望该字段在值为 NaN 并且它不是必填字段时仍进行验证，因此将 otherwise 更改为此应该可以解决此问题：

otherwise: Yup.number().notRequired().nullable()

在末尾添加 .nullable() 是关键。

Yup.when：“ NaN”（从值“ NaN”广播）

2 个答案: