使用 React Hook Form 未显示验证错误

Question

我正在使用React Hook Form以验证一些简单的输入：

import React from "react";

import useForm from "react-hook-form";

import "./App.css";

function App() {

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

  const onSubmit = data => {

    console.log(data);

  };

  return (

    <div className="App">

      <header className="App-header">

        <form onSubmit={handleSubmit(onSubmit)}>

          <input

            className="mkn-input"

            name="firstName"

            placeholder="First name"

            ref={register({

              required: true,

              maxlength: 20,

              message: "invalid first name"

            })}

          />

          <span> {errors.firstName && errors.firstName.message}</span>

          <input

            placeholder="Last name"

            className="mkn-input"

            name="lastName"

            ref={register({

              pattern: /^[A-Za-z]+$/i,

              message: "Invalid last name"

            })}

          />

          {errors.lastName && <span> errors.lastName.message</span>}

          <input

            name="age"

            type="number"

            placeholder="Age"

            className="mkn-input"

            ref={register({ min: 18, max: 99 })}

          />

          <input type="submit" className="mkn-btn" />

        </form>

      </header>

    </div>

  );

}

export default App;

但是我在显示DOM中的错误时遇到了一个奇怪的问题，我也尝试将它们记录在控制台中但没有成功，我错过了什么？

Answer 1

您需要message在required字段中添加，或者只是查询是否有错误：<>&nbsp; <input&nbsp; &nbsp; name="firstName"&nbsp; &nbsp; placeholder="First name"&nbsp; &nbsp; ref={register({&nbsp; &nbsp; &nbsp; required: 'invalid first name'&nbsp; &nbsp; })}&nbsp; />&nbsp; <span> {errors.firstName && errors.firstName.message}</span></>// Or&nbsp;<>&nbsp; <input&nbsp; &nbsp; placeholder="Last name"&nbsp; &nbsp; className="mkn-input"&nbsp; &nbsp; name="lastName"&nbsp; &nbsp; ref={register({&nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; pattern: /^[A-Za-z]+$/i&nbsp; &nbsp; })}&nbsp; />&nbsp; {errors.lastName && <span>Invalid last name</span>}</>// Or https://react-hook-form.com/advanced-usage#ErrorMessagefunction App() {&nbsp; const { register, handleSubmit, errors } = useForm();&nbsp; const onSubmit = data => {&nbsp; &nbsp; console.log(data);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <header className="App-header">&nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={handleSubmit(onSubmit)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="mkn-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="firstName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="First name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={register({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: 'invalid first name'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span> {errors.firstName && errors.firstName.message}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Last name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="mkn-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="lastName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={register({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern: /^[A-Za-z]+$/i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {errors.lastName && <span>Invalid last name</span>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="age"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Age"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="mkn-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={register({ min: 18, max: 99 })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" className="mkn-btn" />&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; </div>&nbsp; );}