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

Question

如何添加验证，我想在电话号码字段（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

您可以使用组件rules的 prop<Controller />来定义验证规则。请查看此处的规则部分以获取更多信息。

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

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>
  );
}