reactjs 如何使用react钩子形式显示页面级错误和内联级错误

g52tjvyc  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(123)

如何使用react钩子表单显示页面级错误和内联级错误,以便内联错误消息将显示在onBlur上,页面级错误消息应显示在onSubmit上。
我想只在单击窗体的“下一步”按钮时显示pageLevel错误。onBlur上的Inline level错误

kgqe7b3p

kgqe7b3p1#

要使用React Hook Form显示页面级和内联级错误,您可以按照以下步骤操作:
安装React Hook Form:确保你的项目中安装了React Hook Form。您可以使用npm或yarn安装:
npm install react-hook-form
设置表单:创建一个表单组件,并从React Hook Form导入必要的函数和组件。

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

function MyForm() {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields go here */}
      <input type="text" name="username" ref={register({ required: true })} />
      {/* Error message for inline-level validation */}
      {errors.username && <p>This field is required.</p>}

      {/* Other form fields */}
      {/* ... */}

      {/* Page-level error message */}
      {Object.keys(errors).length > 0 && (
        <p>There are errors in the form. Please fix them.</p>
      )}

      {/* Submit button */}
      <input type="submit" value="Submit" />
    </form>
  );
}

export default MyForm;

注册表单字段:使用React Hook Form中的register函数注册表单字段并指定验证规则。在上面的示例中,“用户名”字段使用所需的规则注册。
显示内联级错误:若要显示特定字段的错误消息,可以检查该字段的errors对象,并有条件地显示错误消息。在上面的示例中,如果errors.username属性存在,则显示“username”字段的错误消息。
显示页级错误:您可以检查errors对象是否具有任何属性,以确定表单中是否存在任何验证错误。如果出现错误,可以显示页面级错误消息。在上面的示例中,如果Object.keys(errors).length > 0,则显示页面级错误消息。
处理表单提交:在onSubmit函数中,您可以处理表单提交逻辑。在上面的示例中,表单数据被记录到控制台。
通过以下步骤,您可以使用React Hook Form显示页面级和内联级错误。根据您的特定要求自定义错误消息和验证规则。

相关问题