如何使用react-hook-form为Select下拉框添加带错误提示的验证

你的问题核心在于默认值"default"被判定为有效值：required: true仅检查字段是否存在值，但"default"是一个非空字符串，因此验证不会触发错误。而min/max参数针对的是数字或字符串长度验证，完全不适用于下拉框的选项合法性判断。

正确的验证实现方案 #

你需要自定义验证规则，过滤掉"default"这个占位选项，以下是两种常用的可行写法：

方案1：用validate自定义验证逻辑（带自定义错误提示）

<Form.Group>
  <Form.Select
    defaultValue="default"
    {...register("role", {
      required: "请选择角色",
      validate: value => value !== "default" || "请选择有效的角色选项"
    })}
  >
    <option value="default" disabled>
      Select Role
    </option>
    <option value="UI Developer">UI Developer</option>
    <option value="Backend Developer">Backend Developer</option>
    <option value="Python Developer">Python Developer</option>
  </Form.Select>
  {errors.role && <span>{errors.role.message}</span>}
</Form.Group>

方案2：简化版验证（保留原有错误提示）

如果不需要自定义错误文案，也可以直接通过validate判断值是否合法：

<Form.Group>
  <Form.Select
    defaultValue="default"
    {...register("role", {
      required: true,
      validate: value => value !== "default"
    })}
  >
    <option value="default" disabled>
      Select Role
    </option>
    <option value="UI Developer">UI Developer</option>
    <option value="Backend Developer">Backend Developer</option>
    <option value="Python Developer">Python Developer</option>
  </Form.Select>
  {errors.role && <span>Select Role</span>}
</Form.Group>

额外说明 #

• 禁用的占位选项建议使用空值（比如value=""），这样required: true可以直接生效，但如果必须保留"default"作为值，就必须配合validate过滤
• 若你的表单验证模式设置为onSubmit或onBlur，确保提交或失去焦点时会触发验证逻辑

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