useFormの使用

1.useFormの読み込み

//useForm 불어오기
 const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();

2.有効性変数を含む

 const regEx = {
    number: /[0-9]/g,
    email: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    kor: /^[가-힣]+$/,
    eng: /[a-zA-Z]+$/,
  };

3.validatorオブジェクト変数を含む

  const validator = {
    userId: {
      ...register("userId", {
        required: { value: true, message: "이름은 필수 항목입니다." },
      }),
    },
    age: {
      ...register("age", {
        required: { value: true, message: "나이는 필수 항목입니다." },
        pattern: { value: regEx.number, message: "나이는 숫자로 입력해주세요" },
        maxLength: { value: 2, message: "나이는 두자리입니다." },
      }),
    },
    gender: {
      ...register("gender", {
        required: { value: true, message: "성별은 필수 항목입니다." },
        pattern: { value: regEx.eng, message: "성별은 영어로 입력해주세요." },
      }),
    },
    phone: {
      ...register("phone", {
        required: { value: true, message: "휴대폰번호는 필수 항목입니다." },
        pattern: {
          value: regEx.number,
          message: "휴대폰번호를 숫자로 입력해주세요.",
        },
      }),
    },
    email: {
      ...register("email", {
        required: false,
        pattern: {
          value: regEx.email,
          message: "이메일 형식으로 입력해주세요.",
        },
      }),
    },
    address: {
      ...register("address", {
        pattern: { value: regEx.kor, message: "주소를 한글로 입력해주세요" },
      }),
    },
  };

4.inputに適用

return(<>
<form>
      <div className="inputBox">
          <label htmlFor="userId">Name</label>
          <input type="text" {...validator.userId} />
          {errors.userId && (
            <span className="errorMsg">❌ 	         {errors.userId.message}</span>
          )}
        </div>
           {...생략}
</form>
</>
)

5.データ情報をリセットして適用します。jsに転送します。

  const onSubmit = (data) => {
    onUpdate(data);
    reset({
      userId: "",
      phone: "",
      address: "",
      gender: "",
      age: "",
      email: "",
    });
  };

6.結果

1.submitをクリックして何も入力しない

2.パターンに合わない場合

3.フォーマットを入力して「発行」(Submit)をクリックします。