react-hook-form 基本的な使用方法

npm install react-hook-form@latest

import { useState } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form'

// 型を定義
type FormValue = {
  email: string;
  password: string;
  confirmPassword: string;
}

const MyForm = () => {

  // register、handleSubmit、errorsなどの関数やオブジェクトを取得
  // 型は、FormValueを設定
  const {
    register,
    handleSubmit,
    formState: {errors}
  } = useForm<FormValue>();

  // 送信ボタンが押下された場合のイベント
  // 型としてSubmitHandlerを設定
  const onSubmit: SubmitHandler<FormValue> = (data) => {
    console.log("submit", data)
  }

  // パスワード
  const [password, setPassword] = useState<string>("")

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>メールアドレス</label>
        {/* バリデーションとして以下を設定 */}
        {/* 必須項目 */}
        {/*　○○○@◽️◽️.▲▲▲の形式であるかの確認 */}
        <input 
          type="text"
          {...register("email", {
            required: "メールアドレスを入力してください。",
            pattern: { value: /^[a-zA-Z0-9._]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/, message: "○○○@◽️◽️.▲▲▲の形式で入力してください。" }
          })}
        />
        {/*　メールアドレスが未入力の場合のエラーメッセージ */}
        {
          errors.email?.type === "required" && <p style={{ color: 'red', fontWeight: 'bold' }}>{ errors.email.message }</p>
        }
        {/*　○○○@◽️◽️.▲▲▲の形式でない場合のエラーメッセージ */}
        {
          errors.email?.type === "pattern" && <p style={{ color: 'red', fontWeight: 'bold'  }}>{ errors.email.message }</p>
        }
      </div>
      <div>
        <label>パスワード</label>
        {/* バリデーションとして以下を設定 */}
        {/* 必須項目 */}
        {/*　半角英数字と記号(!?%_-+)が必ず含まれている かつ 8文字以上 */}
        <input 
          type="password"
          {...register("password", {
            required: "パスワードを入力してください。",
            pattern: { value: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!?%_\-+])[a-zA-Z\d!?%_\-+]{8,}$/, message: "半角英数字と記号(!?%_-+)が必ず含まれている かつ 8文字以上である必要があります。"}
          })}
          onChange={(e) => setPassword(e.target.value)}
        />
        {/*　パスワードが未入力の場合のエラーメッセージ */}
        {
          errors.password?.type === "required" && <p style={{ color: 'red', fontWeight: 'bold'  }}>{ errors.password.message }</p>
        }
        {/*　半角英数字と記号(!?%_-+)が必ず含まれている かつ 8文字以上 を満たしていない場合のエラーメッセージ */}
        {
          errors.password?.type === "pattern" && <p style={{ color: 'red', fontWeight: 'bold'  }}>{ errors.password.message }</p>
        }
      </div>
      <div>
        <label>パスワード再入力</label>
        {/* バリデーションとして以下を設定 */}
        {/* 必須項目 */}
        {/* パスワードが一致しているか */}
        <input 
          type="password"
          {...register("confirmPassword", {
            required: "パスワードの確認は必須です。",
            validate: value => 
              value === password || "パスワードが一致しません。"
          })}
        />
        {/*　確認用パスワードが未入力の場合のエラーメッセージ */}
        {
          errors.confirmPassword?.type === "required" && <p style={{ color: 'red', fontWeight: 'bold'  }}>{ errors.confirmPassword.message }</p>
        }
        {/* パスワードが一致していない場合のエラーメッセージ */}
        {
          errors.confirmPassword?.type === "validate" && <p style={{ color: 'red', fontWeight: 'bold'  }}>{ errors.confirmPassword.message }</p>
        }
      </div>
      <button type="submit">送信</button>
      <button type="reset">リセット</button>
    </form>
  )
}

export default MyForm;