如何在 React 中使用 react-hook-form 显示错误信息

Question

如何添加验证，我想为 phone 数字字段（helperText，最小 10，最大 10）显示错误消息，如果提交时没有 10 个数字

也显示错误消息

import ReactPhoneInput from "react-phone-input-2"
import {TextField,Button}from "@material-ui/core"

const {register, handleSubmit,formState: { errors }} = useForm()

const getData= (data) => {
   console.log(data.username)
   console.log(data.phone);
}

<form onSubmit={handleSubmit(getData)} >

  <Controller
        control={control}
        name="phone"
        render={({ field: { ref, ...field } }) => (
          <ReactPhoneInput {...field}
            inputExtraProps={{ref, required: true, autoFocus: true }}
            country={"in"}
            onlyCountries={["in"]}
            countryCodeEditable={false}
            specialLabel={"Player Mobile Number"}
          />
        )}
      />
<Button type='submit>Submit</Button> 
</form>

Answer 1

您可以使用 <Controller /> 组件的 rules 属性来定义验证规则。查看规则部分 here 了解更多信息。

要显示错误，您必须使用 useForm 返回的 formState 对象。

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

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

  const isNumber = (number) => !isNaN(number) || "Must be a number";

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="phone"
        rules={{
          required: { value: true, message: "Required" },
          minLength: { value: 12, message: "Min Length" },
          maxLength: { value: 12, message: "Max Length" },
          validate: isNumber
        }}
        render={({ field: { ref, ...field } }) => (
          <ReactPhoneInput
            {...field}
            inputExtraProps={{
              ref,
              required: true,
              autoFocus: true
            }}
            country={"in"}
            onlyCountries={["in"]}
            countryCodeEditable={false}
            specialLabel={"Player Mobile Number"}
          />
        )}
      />
      {errors.phone && <p>{errors.phone.message}</p>}
      <input type="submit" />
    </form>
  );
}

如何在 React 中使用 react-hook-form 显示错误信息

How to show error message using react-hook-form in react

reactjs

react-hook-form