首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >react-hook-form:验证对象如何工作

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

Stack Overflow用户
提问于 2021-11-10 14:36:49
回答 2查看 138关注 0票数 1

我在文档里看到了

代码语言:javascript
复制
<input
  {...register("test1", {
    validate: {
      positive: v => parseInt(v) > 0,
      lessThanTen: v => parseInt(v) < 10,
      checkUrl: async () => await fetch(),
    }
  })}
/>

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

比如数字是-5,然后我显示

代码语言:javascript
复制
"Number is not positive"
"Number less than 10"

用于访问每个错误positivelessThanTen的HOw

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-10 17:22:09

根据默认的RHF,每个字段只会显示一个错误,所以如果有多个错误,你就不必遍历它们了。您可以只使用RHF提供的errors对象并访问字段的name,然后访问message属性。

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

代码语言:javascript
复制
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>
  );
}

票数 1
EN

Stack Overflow用户

发布于 2021-11-10 14:49:20

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

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

我推荐你yup

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69915176

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档