react-hook-form中validate对象校验用法及多错误消息获取方法

步骤1：调整validate规则的返回逻辑 #

校验不通过时直接返回对应错误提示字符串，代替原有的布尔值false即可，修改后的字段注册代码如下：

<input
  {...register("test1", {
    validate: {
      positive: v => parseInt(v) > 0 || "Number is not positive",
      lessThanTen: v => parseInt(v) < 10 || "Number is not less than 10",
      checkUrl: async () => {
        const res = await fetch()
        return res.ok || "Url check failed"
      },
    }
  })}
/>

步骤2：读取对应校验项的错误信息 #

从useForm导出的errors对象中，可直接通过校验规则的键名访问对应错误，规则如下：

• 字段对应的错误集合路径为 errors.[字段名]，此处即errors.test1
• 每个自定义validate的键名会直接对应错误集合下的同名属性，调用message属性即可拿到你自定义的错误文本

完整组件示例：

import { useForm } from "react-hook-form"

function App() {
  const { register, formState: { errors }, handleSubmit } = useForm()

  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("test1", {
          validate: {
            positive: v => parseInt(v) > 0 || "Number is not positive",
            lessThanTen: v => parseInt(v) < 10 || "Number is not less than 10",
          }
        })}
      />
      {/* 单独展示positive规则的错误 */}
      {errors.test1?.positive && <p>{errors.test1.positive.message}</p>}
      {/* 单独展示lessThanTen规则的错误 */}
      {errors.test1?.lessThanTen && <p>{errors.test1.lessThanTen.message}</p>}
      
      <input type="submit" />
    </form>
  )
}

如果输入值为-5，此时positive规则校验不通过，会渲染Number is not positive提示，lessThanTen规则校验通过则不会展示对应提示。

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