19

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

我已经对此进行了测试（但它不起作用）：

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

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

file 必须是一个object类型，但最终值是：（null从 value 转换{}）。如果“null”旨在作为空值，请务必将架构标记为.nullable()

任何想法？

4

3 回答 3

9

这是我的做法

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
  }),
})
于 2020-07-31T20:22:05.673 回答
6

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

当验证器运行时，它首先测试字段类型是否匹配。在这种情况下，它会检查它是否是一个对象。由于不是并且该字段未标记为nullable，因此验证失败并出现类型错误。是的，它永远不会跑到跑的地步，required()因为它很早就退出了。

那么当类型不匹配又不想使用该nullable()方法时，我们如何调整显示的消息呢？我查看了源码，发现消息是在这里生成的。所以它是 locale 对象的一部分。因此，我们可以这样解决它。

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()方法允许您为该字段设置一个漂亮的显示名称，因为该消息将用于验证器中的任何无效类型情况。

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

于 2018-11-28T01:12:55.073 回答
6

我是这样解决的：

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

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

于 2021-08-04T16:13:13.990 回答