如何结合Yup与React Hook Form实现动态多字段必填校验

需求：给定一个随机长度的ID数组，为每个ID生成一个输入字段，所有字段必须满足必填校验。以下是用Yup和React Hook Form替代原生校验的实现方案：

1. 安装依赖 #

首先需要安装所需的包：

npm install react-hook-form yup @hookform/resolvers

2. 完整实现代码 #

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

export default function App() {
  const [ids, setIds] = React.useState(arr1); // arr1为你的ID数组

  // 动态构建Yup校验规则
  const validationSchema = Yup.object().shape(
    ids.reduce((schema, id) => {
      schema[id] = Yup.string().required(`${id} 字段为必填项`);
      return schema;
    }, {})
  );

  // 初始化React Hook Form，关联Yup校验
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(validationSchema),
  });

  // 提交处理函数，仅在校验通过时执行
  const onSubmit = (values) => {
    console.log('提交的有效值:', values);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        {ids.map(num => (
          <div key={num}>
            <input 
              {...register(num)} 
              placeholder={`请输入${num}`}
            />
            {/* 显示校验错误提示 */}
            {errors[num] && <span style={{ color: 'red' }}>{errors[num].message}</span>}
          </div>
        ))}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

关键说明 #

• 动态生成校验规则：通过ids.reduce遍历ID数组，为每个ID对应的字段添加required校验，构建符合Yup规范的校验schema。
• 关联校验与表单：借助yupResolver将Yup校验规则传入useForm，实现表单输入的自动校验。
• 简化输入状态管理：用register方法替代手动维护输入值和校验逻辑，React Hook Form会自动处理输入状态、校验触发等操作。
• 错误反馈：通过formState.errors获取校验错误信息，实时向用户展示错误提示。

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