如何使用Yup在ReactJS中验证上传文件数量（至少3个）

在React表单中实现“至少上传3个文件”的验证，主流方案是结合Yup或Zod这类Schema验证库，以下是具体实现：

使用Yup实现 #

Yup是React生态中常用的表单验证库，先确保已安装：

npm install yup
# 或
yarn add yup

编写验证Schema：

import * as Yup from 'yup';

const fileUploadSchema = Yup.object().shape({
  // 假设表单字段名为files
  files: Yup.array()
    // 验证数组长度至少为3，自定义错误提示
    .min(3, '必须至少上传3个文件')
    // 确保字段不为空
    .required('请选择要上传的文件')
    // 可选：验证数组中每个元素都是File类型
    .of(
      Yup.mixed().test(
        'is-file',
        '所有上传项必须是文件',
        (value) => value instanceof File
      )
    ),
});

结合Formik使用示例 #

如果用Formik管理表单状态：

import { Formik, Form, Field } from 'formik';

function FileUploadForm() {
  return (
    <Formik
      initialValues={{ files: [] }}
      validationSchema={fileUploadSchema}
      onSubmit={(values) => {
        console.log('上传的文件：', values.files);
        // 这里写提交逻辑
      }}
    >
      {({ errors, touched, setFieldValue }) => (
        <Form>
          <input
            type="file"
            multiple
            onChange={(e) => setFieldValue('files', Array.from(e.target.files))}
          />
          {/* 显示错误提示 */}
          {errors.files && touched.files && <div style={{ color: 'red' }}>{errors.files}</div>}
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

使用Zod实现 #

Zod是更现代的Schema声明库，类型支持更完善，先安装：

npm install zod
# 或
yarn add zod

编写验证Schema：

import { z } from 'zod';

const fileUploadSchema = z.object({
  files: z.array(z.instanceof(File))
    // 最小长度3，自定义错误信息
    .min(3, '至少需要上传3个文件')
    // 禁止空数组
    .nonempty('请选择文件后再提交'),
});

结合React Hook Form使用示例 #

如果用React Hook Form：

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

function FileUploadForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(fileUploadSchema),
    defaultValues: { files: [] },
  });

  const onSubmit = (data) => {
    console.log('上传的文件：', data.files);
    // 提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="file"
        multiple
        {...register('files', {
          onChange: (e) => e.target.files,
        })}
      />
      {errors.files && <div style={{ color: 'red' }}>{errors.files.message}</div>}
      <button type="submit">提交</button>
    </form>
  );
}

内容的提问来源于stack exchange，提问作者nur najihah