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，或者只是查询是否存在错误：

<>
  <input
    name="firstName"
    placeholder="First name"
    ref={register({
      required: 'invalid first name'
    })}
  />
  <span> {errors.firstName && errors.firstName.message}</span>
</>

// Or 
<>
  <input
    placeholder="Last name"
    className="mkn-input"
    name="lastName"
    ref={register({
      required: true,
      pattern: /^[A-Za-z]+$/i
    })}
  />
  {errors.lastName && <span>Invalid last name</span>}
</>

// Or https://react-hook-form.com/advanced-usage#ErrorMessage

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: 'invalid first name'
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              required: true,
              pattern: /^[A-Za-z]+$/i
            })}
          />
          {errors.lastName && <span>Invalid last name</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>
  );
}

使用React Hook Form不会显示验证错误

1 个答案: