(HTML,CSS,JavaScript)JavaScriptで入力チェック・文字を入力制限する方法(3ページ目)テキスト入力欄に対して、JavaScriptを使わずにHTMLだけで入力制限をする書き方から、JavaScriptを使って細かく入力チェックをする方法までを解説。メールアドレスや日付のように入力文字数や文字種を制限したいフォームでは、リアルタイムにエラー表示できると便利。正規表現などを使う入力チェックの書き方をサンプルと共にご紹介。数字とハイフン記号だけの入力に制限する書き方まずは、数字とハイフン記号だけの入力を求めたい場合のJavaScriptソースをご紹介いたします。郵便番号の入力欄や、電話番号の入力欄や、何らかの数値の入力欄などに使えるでしょう。電話番号」欄に適用しています。'入力には、数字とハイフン記号だけが使えます。----------});</script>上記のソースをそのままHTMLファイルへコピー&ペーストすれば使えます。カスタマイズしたい際に書き換える場所は太字で示してあります。このJavaScriptでは「class="number"」が指定された入力欄を対象にして、入力チェックを実行するよう記述してあります。});」は、この内側に書かれたスクリプトを「HTMLソースの読み込み完了直後」に実行させるための記述です。対象の入力フォームの後に直接JavaScriptソースを記述する場合など、不要なら書かなくても構いません。分からない場合は、とりあえず上記のまま書いておけば良いでしょう。先程のJavaScriptソースの意味を、以下に簡単に解説しておきます。カスタマイズする際の参考にして下さい。document.getElementsByClassName('number');ここでは、HTMLソース内でclass名に「number」が指定されている全ての要素を変数targetsに格納しています。同一ページ内に複数個ある場合でも、すべてが得られます。class名だけをチェックしていますから、input要素でもtextarea要素でも関係なく一括して得られます。この変数targetsにはノードリスト(NodeList)の形で格納されますから、for文を使ってループすることで、すべての要素に対して後述の処理を実行できます。}ここでは、対象のテキスト入力欄のinputイベントに、入力チェック用の処理「~~~」を登録しています。テキスト入力欄にキーボードから文字が入力されたり、マウスなどで文字が貼り付けられた場合に処理が実行されます。this.parentNode.getElementsByClassName('alertarea');ここでは、対象の要素と同じ親要素に含まれる、class名が「alertarea」である要素を変数alertelementに格納しています。この要素に対して、後から入力チェック結果の文字列を表示します。~~~ここでは、「何か入力があって、指定以外の文字があれば」というチェック条件を記述しています。」は何も入力されていなければチェックしないための記述です。」が正規表現で入力内容をチェックしている記述です。■上記の正規表現についてここで書いた正規表現「/[^\d\-]/」は、数字とハイフン記号以外の文字がある場合を示しています。「\d」は数字10文字を表す特殊文字です。「\-」はハイフン記号を表しています。「^」は否定を意味しています(後述)。この正規表現は、すべての文字を列挙して「/[^0123456789\-]/」と書いても同じ意味になります。正規表現では「0~9の範囲全部」という意味で「0-9」と書けますから「/[^0-9\-]/」と記述しても同じ意味です。このようにハイフン記号「-」は範囲を示すために使われるので、ハイフン記号そのものを表したい場合は「-」ではなく「\-」と記述します。使った記述を「文字クラス」といい、「列挙した文字のどれかと一致する場合」を指します。Cのいずれかの文字」を指します。いくつでも文字を含められますから「/[ABCあいう亜井宇]/」のような記述もできます。数字があるかどうかは「/[0-9]/」で調べられますが、逆に数字以外があるかどうかを調べたい場合もあります。その際は文字クラスの先頭に「^」記号を付けます。この書き方を「否定文字クラス」と言い、カッコ内に含めた文字以外の文字がある場合に該当します。」なら英数字以外があるかどうかを調べられます。日本の郵便番号(3桁+7桁)の入力だけをチェックしたいなら、以下のように記述することでもっと制限を厳密にできます。{上記の「\d{3}」は「数字が3文字」の意味、「\d{4}」は「数字が4文字」の意味です。それらに挟まれている「\-?」は「ハイフン記号が0文字か1文字」の意味です(※1)。最初の「^」は「先頭」を意味し(※2)、末尾の「$」は「最後」を意味しています。上記の正規表現は以下の2種類の表記を表しています。(例えば「1230012」)ここでは「this.value.match」の前に否定を表す「!」記号を加えているので、上記の2表記に合致しない入力がすべてエラーになります。桁が足りない「123-45」だとエラーになりますし、数字のパターンは合っていても先頭に余計な文字が付いている「〒123-4567」もエラーになります。※1:正規表現で「?」記号は「直前の文字が0回または1回ある場合」を指します。「\-?」ならハイフン記号が0個か1個ある場合を示すのでハイフン記号は省略可能です。「\-」とだけ書けば「ハイフン記号が1つある場合」を示すのでハイフン記号の省略を不可にできます。※2:「^」記号は文字クラスの中なら「否定」を表しますが、ここでは文字クラスの中ではないので「先頭」を示しています。'入力には、数字とハイフン記号だけが使えます。}先程の「3」で特定した入力チェック結果(エラーメッセージ)表示用スペースに、メッセージを掲載しています。自由な文面を記述して下さい。引用符の内側には自由なHTMLソースが書けます。red";ここでは、対象のテキスト入力欄の枠線を装飾しています。上記の記述だと、太さ2ピクセル(2px)で赤色(red)の実線(solid)になります。赤色の太線で問題の入力欄を目立たせるためです。引用符の内側は、CSSのborderプロパティの値を自由に記述できます。ここでは枠線の配色しか変更していませんが、もし背景色や文字色を変更したいなら、以下のように書けます。文字色を淡い赤色に上記のように「this.style.」に続いて、変更したいCSSのプロパティ名を指定して自由な値を代入すれば変更できます。JavaScriptではハイフン記号「-」を使わない代わりに続く単語の先頭を大文字にして記述します。上記の例にもあるbackground-colorプロパティの場合は「backgroundColor」と記述します。font-familyプロパティの場合は「fontFamily」のように記述します。list-style-typeプロパティの場合なら「listStyleType」です。black";}入力チェックの結果、何もエラーがなければエラーメッセージを消して、テキスト入力欄の配色も元に戻す必要があります。その処理が上記の5行です。「6」で枠線以外の装飾も変更しているなら、その装飾も元に戻す必要があります。上記のJavaScriptだけでは、ユーザが「送信」ボタンを押した際にエラーがあっても送信処理を中断はできません。エラーがある場合に送信処理を中止する方法は、本記事の最後でご紹介いたします。次に、英字と特定の記号だけの入力に制限する書き方を見てみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。