如何使 yup 数字接受可为空的值？答案

【问题标题】：How can I make a yup number accept nullable values?如何使 yup 数字接受可为空的值？
【发布时间】：2020-11-23 13:57:41
【问题描述】：

我有以下是的检查：

nrOfApples: yup.number().min(0).max(999),

现在，如果我将该字段留空，它会验证为假。有没有办法让 yup.number() 接受空值？我试过了：

yup.number().nullable()

但它似乎不起作用。关于如何让这样的事情发生的任何想法？

【问题讨论】：

标签： javascript yup

【解决方案1】：

您必须将 true 传递给可为空的 -

nrOfApples: yup.number().min(0).max(999).nullable(true);

发件人：https://github.com/jquense/yup/issues/500

工作示例：https://runkit.com/xdumaine/5f2816c75a0ba5001aa312b2

请注意，如果您添加 required().nullable(true)，required 会覆盖 nullable，并且 null 将不会生效。

更新：

您可以使用transform 将NaN 值转换为null。我用这个更新了runkit：

const contactSchema = yup.object({
  name: yup.string()
    .required(),
  nrOfApples: yup
    .number()
    .min(0)
    .max(999)
    .nullable(true)
    // checking self-equality works for NaN, transforming it to null
    .transform((_, val) => val === val ? val : null) 
})

【讨论】：

嗨@xdumaine，感谢您的回复。但是，当该字段为空时，它返回的值是 NaN 而不是 null，因此 .nullable(true) 在这种情况下不起作用。