使用Yup验证图片必填项失效问题求助

你的问题核心在于：Yup的string().required()会把空字符串（""）判定为有效的字符串类型，所以不会触发必填校验，而你给image字段的初始值正好是空字符串，这就导致校验不生效。

下面给你几个针对性的解决办法：

方法1：修改初始值为undefined或null #

把image的初始值从空字符串改成undefined或者null，这样Yup的required()会识别为“未提供值”，触发校验：

const initialValues = {
  image: undefined, // 或者 null
};

这种方法最简单，适合图片URL输入框的场景。

方法2：自定义校验规则（适配空字符串场景） #

如果必须保留初始值为空字符串，可以用Yup的test方法自定义校验逻辑，明确判断值是否为空：

image: yup.string()
  .test('is-not-empty', 'required', (value) => {
    // 排除空字符串和全空格的情况
    return value?.trim() !== '';
  })

方法3：适配文件上传场景（如果是input[type="file"]） #

如果你的图片字段是文件上传组件（<input type="file" />），那Formik绑定的应该是文件对象，而非字符串。这时候要调整初始值和校验规则：

// 初始值设为null
const initialValues = {
  image: null,
};

// 校验规则用mixed类型，同时可添加格式校验
image: yup.mixed()
  .required("required")
  .test('valid-image', '请上传图片格式', (value) => {
    if (!value) return true; // required已经校验过必填，这里只做格式检查
    return ['image/jpeg', 'image/png', 'image/gif'].includes(value.type);
  })

内容的提问来源于stack exchange，提问作者SUPRIYA Upadhyay