如何在react-hook-form中校验输入值是否属于指定数组？

当然可以实现，你只需要在register的校验规则中添加自定义的validate函数，判断输入值是否存在于目标数组中即可。以下是修改后的完整代码：

const array = ['foo', 'bar']

const Form = () => {
  const { handleSubmit, register, formState: { errors } } = useForm();

  const submitFunction = (data) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(submitFunction)}>
        <input
          type="text"
          {...register("value", {
            required: "此字段为必填项",
            validate: (value) => {
              // 判断输入值是否在数组中，不符合则返回错误提示
              return array.includes(value) || `输入值必须是 ${array.join('、')} 中的一个`;
            }
          })}
        />
        {/* 展示校验错误信息 */}
        {errors.value && <p style={{ color: 'red' }}>{errors.value.message}</p>}
        <input type="submit" />
      </form>
    </div>
  );
};

关键说明： #

• validate函数接收当前输入的value作为参数，返回true表示校验通过，返回字符串则表示校验失败，该字符串会作为错误提示信息
• 通过formState.errors可以获取对应字段的校验错误对象，从中取出message即可展示给用户
• 保留了原有的required必填校验，你可以根据需求调整错误提示文本

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