如何使用react-hook-form实现下拉选择框(select)的表单验证？

你可以沿用和email输入框一致的Controller组件模式来实现下拉框的验证，以下是完整的改造代码：

import { useForm, Controller } from "react-hook-form";

function YourForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      email: "",
      budget: "" // 对应下拉框空选项的初始值
    }
  });

  const onSubmit = (data) => {
    console.log(data); // 提交时获取验证通过的表单数据
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 已实现的email输入框（补充验证规则与错误提示） */}
      <div className='input-group mb-3'>
        <Controller
          control={control}
          name="email"
          defaultValue=""
          rules={{
            required: "邮箱不能为空",
            pattern: {
              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
              message: "请输入有效的邮箱格式"
            }
          }}
          render={({ field }) => (
            <input
              {...field}
              type="email"
              className={`form-control ${errors.email ? 'is-invalid' : ''}`}
              placeholder="Email"
              aria-label="email"
            />
          )}
        />
        {errors.email && <div className="invalid-feedback">{errors.email.message}</div>}
      </div>

      {/* 改造后的下拉选择框 */}
      <div className='input-group mb-3'>
        <Controller
          control={control}
          name="budget"
          defaultValue=""
          rules={{
            required: "请选择你的预算" // 替代原有的data-msg提示
          }}
          render={({ field }) => (
            <select
              {...field}
              className={`form-control form-select ${errors.budget ? 'is-invalid' : ''}`}
              id='budget'
            >
              <option value=''>Budget</option>                  
              <option value='budget3'>More than $500,000</option>
            </select>
          )}
        />
        {errors.budget && <div className="invalid-feedback">{errors.budget.message}</div>}
      </div>

      <button type="submit" className="btn btn-primary">提交</button>
    </form>
  );
}

核心要点说明： #

• 统一用Controller包裹：和email输入框逻辑对齐，通过control关联表单控制器，name对应表单数据的键名，defaultValue匹配下拉框空选项的value值。
• 内置验证规则：在rules中配置required规则及自定义提示文本，替代原生的required属性和data-msg。
• 错误状态处理：借助formState.errors获取验证结果，给下拉框添加is-invalid类适配Bootstrap样式，同时渲染错误提示文本。
• 简化值同步：直接通过{...field}把onChange、value等属性传递给select，无需手动编写回调，React Hook Form会自动完成表单值的同步。

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