如何在React中使用Yup验证文件名是否符合指定规则？

你的代码逻辑错误导致校验始终不通过：当前使用SUPPORTED_NAMES.includes(value.name)是判断文件名完全匹配数组中的某一项，但你的需求是文件名包含任一关键词，两者逻辑不符。

修复后的代码 #

const SUPPORTED_NAMES = ['Account','ticket','task']

validationSchema: Yup.object().shape({
  file: Yup.mixed()
    .required("file is required")
    .test(
      "fileName",
      "file name not supported",
      (value) => {
        if (!value) return false;
        // 检查文件名是否包含任一关键词，支持大小写不敏感匹配（可选）
        return SUPPORTED_NAMES.some(keyword => 
          value.name.toLowerCase().includes(keyword.toLowerCase())
        );
      }
    )
})

关键修改点 #

• 替换includes为some方法，遍历关键词数组检查是否有任一关键词存在于文件名中
• 增加大小写不敏感处理（不需要可去掉.toLowerCase()），避免因大小写差异导致校验失败
• 明确!value时返回false的分支，逻辑更清晰

内容的提问来源于stack exchange，提问作者Jose Reyes