react-hook-form：验证对象的工作原理答案

【问题标题】：react-hook-form: How validate object worksreact-hook-form：验证对象的工作原理
【发布时间】：2021-11-10 14:36:48
【问题描述】：

我在文档中看到

<input
  {...register("test1", {
    validate: {
      positive: v => parseInt(v) > 0,
      lessThanTen: v => parseInt(v) < 10,
      checkUrl: async () => await fetch(),
    }
  })}
/>

那么在这里我如何为每个验证显示不同的消息。

喜欢的数字是-5，然后我显示

"Number is not positive"
"Number less than 10"

如何访问每个错误 positive 和 lessThanTen

【问题讨论】：

你可以只从验证函数中返回一个字符串：positive: v => parseInt(v) > 0 || "Number is not positive"
如何使用按键。或循环显示它们

标签： react-hook-form

【解决方案1】：

默认情况下，RHF 每个字段只会显示一个错误，因此如果有多个错误，您就不必遍历它们。您可以只使用 RHF 提供的 errors 对象并访问您的字段的 name，然后访问 message 属性。

如果您需要同时显示所有错误，您可以设置配置criteriaMode，查看文档here 了解更多信息。

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="test1">Test Field</label>
      <input
        {...register("test1", {
          validate: {
            positive: (v) => parseInt(v) > 0 || "Number is not positive",
            lessThanTen: (v) => parseInt(v) < 10 || "Number less than 10",
            checkUrl: async () => {
              const result = await Promise.resolve(true);

              return result || "result was false so show this message";
            }
          }
        })}
      />
      {errors.test1 && <p>{errors.test1.message}</p>}

      <input type="submit" />
    </form>
  );
}

【讨论】：

我可以使用type访问每个错误

【解决方案2】：

要应用多个验证，您可以构建一个自定义挂钩作为解析器。自定义钩子可以很容易地与 yup/Joi/Superstruct 集成作为验证方法，并在验证解析器中使用。

您可以在此处找到更多文档和示例： https://react-hook-form.com/advanced-usage/ 在该部分：带有解析器的自定义 Hook

我推荐你yup。

【讨论】：

我的问题更具体到validate key