react-hook-form：验证对象如何工作

Question

我在文档中看到

<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

Answer 1

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

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

我推荐你yup。

Answer 2

默认情况下，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>
  );
}

react-hook-form：验证对象如何工作

react-hook-form: How validate object works

react-hook-form