いうライブラリを使うと簡単に設定できますのでご紹介します。4.7.2でお送りします。インストールnpmでライブラリのインストールをしましょう。react-hook-form一つだけのバリデーション準備ができたのでさっそく使ってみましょう。最初に入力が必須のバリデーションを設定してみます。InputFormというフォーム用のコンポーネントを作る想定で進めます。'タイトルは必ず入力してください。InputForm2行目useFormを使用するので、インポートしましょう。3〜6行目TypeScriptを使用している場合はフォームに使用する型を設定します。9行目useFormで使用する機能を変数に入れます。11行目フォームが送信されたとき実行される関数です。(18行目で設定してます。)引数は設定したFormDataの形式で扱うことができます。reset関数でインプットに入力した値をクリアーすることができます。18行目formにhandleSubmitを設定する必要があるので基本的にそのまま書きます。21行目エラーの時inputにもスタイル設定したいときは書きます。23行目バリデーションはrelに設定します。'エラーメッセージ'という形で設定します。27行目エラーがあったとき表示するメッセージです。エラーになるとerrors.title.messageにregisterで設定した文字列が入ります。複数のバリデーション先ほどは必須だけでしたが、基本的には文字数を設定したりとか複数のバリデーションを組み合わせるのがほとんどだと思います。必須条件に追加して、3文字以上、100文字以下の条件を追加してみましょう。registerを次の様に変更しましょう。'タイトルは必ず入力してください。'タイトルは3文字以上入力してください。'タイトルは100文字以内で入力してください。}})}/>minLengthとmaxLengthに関しては制御する文字数も必要なので、value、messageの形で設定します。正規表現でカスタムバリデーションを設定する方法バリデーションタイプは最低限のものしか用意されていないので、独自に設定する場合はpatternを使います。'必ず入力してください。'正しい郵便番号を入力してください。'}})}/>基本的な使い方は以上です。その他にも色々機能がありますので詳しくは、下記ドキュメントをご確認ください。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。