Question

我正在使用Yup来验证我的表单。在我的一种形式中，我要验证一个<input type="file" />是否有文件。

我已经对此进行了测试（并且无法正常工作）：

Yup.object().shape({
  file: Yup.object().shape({
    name: Yup.string().required()
}).required('File required')

我在控制台中收到以下错误消息：

文件必须为object类型，但最终值为：null（广播从值{}）。如果将“ null”用作空值，请确保将该架构标记为.nullable()

有什么主意吗？

Answer 1

这是我的做法

import { object, string, mixed } from "yup"

const schema = object().shape({
  attachment: mixed().test("fileSize", "The file is too large", (value) => {
    if (!value.length) return true // attachment is optional
    return value[0].size <= 2000000
  }),
})

Answer 2

我知道这是一个古老的问题，但是我遇到了同样的问题，并跟踪了正在发生的事情。

运行验证器时，它正在测试字段类型是否首先匹配。在这种情况下，它将检查它是否是对象。由于不是，并且该字段未标记为nullable，因此验证失败，并显示类型错误。是的，Yup永远无法达到运行required()的地步。

那么，当类型不匹配并且您不想使用nullable()方法时，我们如何调整显示的消息？我查看了源，发现消息是here生成的。因此，它是语言环境对象的一部分。因此，我们可以像这样解决它。

import * as Yup from 'yup';
import { setLocale } from 'yup';

setLocale({
  mixed: {
    notType: '${path} is required',
  }
})

Yup.object().shape({
  file: Yup.object().shape({
  name: Yup.string().required()
}).label('File')

现在，当类型不正确时，将显示新消息。通过label()方法，您可以为该字段设置一个不错的显示名称，因为该消息将在验证器中的任何无效类型情况下使用。

另一种选择是专门为此字段编写一个自定义验证器，但是在这种情况下，这似乎有些过分。

Answer 3

我是这样解决的：

const schema = Yup.object().shape({
    file: Yup.mixed().required('File is required'),
})

如果您尝试在没有文件的情况下提交表单，则会引发错误，而当您有文件时，错误就会消失。

使用YUP验证文件是否存在

3 个答案: