React-hook-form图片扩展名验证失效问题求助

问题核心原因 #

你遇到的扩展名验证失效，本质是文件输入字段未正确注册到React Hook Form（RHF）的表单状态中，或者验证规则未正确绑定到该字段。由于你使用useRef手动获取文件，RHF无法自动监听文件变化并触发校验，导致自定义的扩展名规则无法生效。

修复方案 #

以下是结合useRef和RHF的正确实现方式，确保扩展名校验正常触发：

完整修正代码 #

import { useForm } from "react-hook-form";
import { useRef } from "react";

function ImageUploadForm() {
  const { register, handleSubmit, formState: { errors }, setValue } = useForm();
  const fileInputRef = useRef(null);

  // 监听文件选择变化，手动同步到RHF表单并触发校验
  const handleFileSelect = (e) => {
    const selectedFile = e.target.files[0];
    // 将文件值同步到RHF，并强制触发校验
    setValue("uploadedImage", selectedFile, { shouldValidate: true });
  };

  const onFormSubmit = (formData) => {
    // 处理表单提交逻辑，比如上传文件
    console.log("提交数据:", formData);
  };

  return (
    <form onSubmit={handleSubmit(onFormSubmit)} className="form-container">
      {/* 文本输入（正常校验） */}
      <div className="form-group">
        <label>标题</label>
        <input
          type="text"
          {...register("title", { required: "标题为必填项" })}
        />
        {errors.title && <p className="error-text">{errors.title.message}</p>}
      </div>

      {/* 文件上传字段（修复后可触发扩展名校验） */}
      <div className="form-group">
        <label>上传图片（仅支持JPG/JPEG/PNG）</label>
        <input
          type="file"
          ref={fileInputRef}
          // 注册字段到RHF，并绑定验证规则
          {...register("uploadedImage", {
            required: "请选择图片文件",
            validate: (file) => {
              if (!file) return true; // 必填校验已处理空值情况
              // 定义允许的扩展名正则（忽略大小写）
              const allowedExts = /(\.jpg|\.jpeg|\.png)$/i;
              // 校验扩展名
              return allowedExts.test(file.name) || "仅支持JPG/JPEG/PNG格式的图片";
            }
          })}
          onChange={handleFileSelect}
        />
        {errors.uploadedImage && <p className="error-text">{errors.uploadedImage.message}</p>}
      </div>

      <button type="submit">提交表单</button>
    </form>
  );
}

export default ImageUploadForm;

关键修复点说明 #

1. 注册文件字段到RHF：通过register("uploadedImage", {...})将文件输入字段绑定到RHF的表单状态，确保验证规则能作用于该字段。
2. 手动同步文件值并触发校验：在handleFileSelect中调用setValue将选中的文件同步到RHF，同时设置shouldValidate: true，确保每次选择文件都立即触发校验，而非仅在提交时。
3. 可靠的扩展名校验：使用正则表达式检查文件名的扩展名（忽略大小写），相比仅校验file.type更可靠（部分浏览器或文件可能返回不准确的MIME类型）。如果需要双重校验，可同时检查file.type：

   validate: (file) => {
     if (!file) return true;
     const allowedExts = /(\.jpg|\.jpeg|\.png)$/i;
     const allowedTypes = ["image/jpeg", "image/png"];
     const isValidExt = allowedExts.test(file.name);
     const isValidType = allowedTypes.includes(file.type);
     return isValidExt && isValidType || "仅支持JPG/JPEG/PNG格式的图片";
   }
   

4. 错误信息渲染：通过errors.uploadedImage获取RHF返回的验证错误，确保错误提示正常显示。

替代方案（无需手动同步） #

如果不需要保留useRef，可以直接通过RHF的register自动管理文件输入，无需手动监听onChange：

<input
  type="file"
  {...register("uploadedImage", {
    required: "请选择图片文件",
    validate: (file) => {
      const allowedExts = /(\.jpg|\.jpeg|\.png)$/i;
      return allowedExts.test(file?.name) || "仅支持JPG/JPEG/PNG格式";
    }
  })}
/>

内容的提问来源于stack exchange，提问作者Ram Chander