3/7 JavaScriptで入力チェック・文字を入力制限する方法 [ホームページ作成] All About

A. 数字とハイフン記号だけの入力に制限する書き方

まずは、数字とハイフン記号だけの入力を求めたい場合のJavaScriptソースをご紹介いたします。郵便番号の入力欄や、電話番号の入力欄や、何らかの数値の入力欄などに使えるでしょう。本記事で用意したサンプルページ「JavaScript入力チェック例」では、「3. 郵便番号」と「5. 電話番号」欄に適用しています。

■JavaScriptソース：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {

  // ----------------------------------------------
  // ▼数字とハイフン記号の入力チェック用スクリプト
  // ----------------------------------------------
  var targets = document.getElementsByClassName('number');
  for (var i=0 ; i<targets.length ; i++) {
    // ▼文字が入力されたタイミングでチェックする：
    targets[i].oninput = function () {
      var alertelement = this.parentNode.getElementsByClassName('alertarea');
      if( ( this.value != '') && ( this.value.match( /[^\d\-]+/ )) ) {
        // ▼何か入力があって、指定以外の文字があれば
        if( alertelement[0] ) { alertelement[0].innerHTML = '入力には、数字とハイフン記号だけが使えます。'; }
        this.style.border = "2px solid red";
      }
      else {
        // ▼何も入力がないか、または指定文字しかないなら
        if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
        this.style.border = "1px solid black";
      }
    }
  }
  // ----------
  // ▲ここまで
  // ----------

});
</script>

上記のソースをそのままHTMLファイルへコピー＆ペーストすれば使えます。カスタマイズしたい際に書き換える場所は太字で示してあります。このJavaScriptでは「class="number"」が指定された入力欄を対象にして、入力チェックを実行するよう記述してあります。

※上記のソースの中で、<script>タグの直後と、</script>タグの直前に記載した「document.addEventListener('DOMContentLoaded', function() { ～～～ });」は、この内側に書かれたスクリプトを「HTMLソースの読み込み完了直後」に実行させるための記述です。対象の入力フォームの後に直接JavaScriptソースを記述する場合など、不要なら書かなくても構いません。よく分からない場合は、とりあえず上記のまま書いておけば良いでしょう。

数字とハイフン記号だけの入力をチェックするJavaScriptソースの説明

先程のJavaScriptソースの意味を、以下に簡単に解説しておきます。カスタマイズする際の参考にして下さい。

■1. 入力チェック対象のテキスト入力欄を特定する

var targets = document.getElementsByClassName('number');

ここでは、HTMLソース内でclass名に「number」が指定されている全ての要素を変数targetsに格納しています。同一ページ内に複数個ある場合でも、すべてが得られます。class名だけをチェックしていますから、input要素でもtextarea要素でも関係なく一括して得られます。

この変数targetsにはノードリスト(NodeList)の形で格納されますから、for文を使ってループすることで、すべての要素に対して後述の処理を実行できます。

■2. テキスト入力欄に何か入力されたタイミングで実行する

targets[i].oninput = function () { ～～～ }

ここでは、対象のテキスト入力欄のinputイベントに、入力チェック用の処理「～～～」を登録しています。テキスト入力欄にキーボードから文字が入力されたり、マウスなどで文字が貼り付けられた場合に処理が実行されます。

■3. 入力チェック結果(エラーメッセージ)表示用スペースの場所を特定する

var alertelement = this.parentNode.getElementsByClassName('alertarea');

ここでは、対象の要素と同じ親要素に含まれる、class名が「alertarea」である要素を変数alertelementに格納しています。この要素に対して、後から入力チェック結果の文字列を表示します。

■4. 入力チェックを実行する

if( ( this.value != '') && (this.value.match( /[^\d\-]/ )) ) { ～～～

ここでは、「何か入力があって、指定以外の文字があれば」というチェック条件を記述しています。「&&」の左側にある「 ( this.value != '') 」は何も入力されていなければチェックしないための記述です。右側の「 (this.value.match( /[^\d\-]/ )) 」が正規表現で入力内容をチェックしている記述です。

■上記の正規表現について
ここで書いた正規表現「/[^\d\-]/」は、数字とハイフン記号以外の文字がある場合を示しています。「\d」は数字10文字を表す特殊文字です。「\-」はハイフン記号を表しています。「^」は否定を意味しています(後述)。この正規表現は、

すべての文字を列挙して「/[^0123456789\-]/」と書いても同じ意味になります。
正規表現では「0～9の範囲全部」という意味で「0-9」と書けますから「/[^0-9\-]/」と記述しても同じ意味です。

このようにハイフン記号「-」は範囲を示すために使われるので、ハイフン記号そのものを表したい場合は「-」ではなく「\-」と記述します。

※補足：文字クラス・否定文字クラス
正規表現では角カッコ [ ] を使った記述を「文字クラス」といい、「列挙した文字のどれかと一致する場合」を指します。例えば「/[ABC]/」だと「A, B, Cのいずれかの文字」を指します。いくつでも文字を含められますから「/[ABCあいう亜井宇]/」のような記述もできます。

数字があるかどうかは「/[0-9]/」で調べられますが、逆に数字以外があるかどうかを調べたい場合もあります。その際は文字クラスの先頭に「^」記号を付けます。この書き方を「否定文字クラス」と言い、カッコ内に含めた文字以外の文字がある場合に該当します。例えば、「/[^0-9]/」なら数字以外があるかどうかを調べられますし、「/[^A-Za-z0-9]/ 」なら英数字以外があるかどうかを調べられます。

※補足：もう少し厳密に内容を判別したい場合の例「郵便番号」
例えば日本の郵便番号(3桁＋7桁)の入力だけをチェックしたいなら、以下のように記述することでもっと制限を厳密にできます。

if( ( this.value != '') && (!this.value.match( /^\d{3}\-?\d{4}$/ )) ) {

上記の「\d{3}」は「数字が3文字」の意味、「\d{4}」は「数字が4文字」の意味です。それらに挟まれている「\-?」は「ハイフン記号が0文字か1文字」の意味です(※1)。最初の「^」は「先頭」を意味し(※2)、末尾の「$」は「最後」を意味しています。つまり、上記の正規表現は以下の2種類の表記を表しています。

表記1：「3桁の数字」＋「ハイフン記号」＋「4桁の数字」 (例えば「123-0012」)
表記2：「3桁の数字」＋「4桁の数字」 (例えば「1230012」)

ここでは「this.value.match」の前に否定を表す「!」記号を加えているので、上記の2表記に合致しない入力がすべてエラーになります。例えば桁が足りない「123-45」だとエラーになりますし、数字のパターンは合っていても先頭に余計な文字が付いている「〒123-4567」もエラーになります。

※1：正規表現で「?」記号は「直前の文字が0回または1回ある場合」を指します。「\-?」ならハイフン記号が0個か1個ある場合を示すのでハイフン記号は省略可能です。「\-」とだけ書けば「ハイフン記号が1つある場合」を示すのでハイフン記号の省略を不可にできます。
※2：「^」記号は文字クラスの中なら「否定」を表しますが、ここでは文字クラスの中ではないので「先頭」を示しています。

■5. 入力チェック結果を表示する (エラーがある場合)

if( alertelement[0] ) { alertelement[0].innerHTML = '入力には、数字とハイフン記号だけが使えます。'; }

先程の「3」で特定した入力チェック結果(エラーメッセージ)表示用スペースに、メッセージを掲載しています。自由な文面を記述して下さい。引用符の内側には自由なHTMLソースが書けます。

■6. テキスト入力欄の配色を変更する (エラーがある場合)

this.style.border = "2px solid red";

ここでは、対象のテキスト入力欄の枠線を装飾しています。上記の記述だと、太さ2ピクセル(2px)で赤色(red)の実線(solid)になります。赤色の太線で問題の入力欄を目立たせるためです。引用符の内側は、CSSのborderプロパティの値を自由に記述できます。ここでは枠線の配色しか変更していませんが、もし背景色や文字色を変更したいなら、以下のように書けます。

this.style.color = "#cc0000";  // 文字色を濃い赤色に
this.style.backgroundColor = "#ffdddd";  // 文字色を淡い赤色に

上記のように「this.style.」に続いて、変更したいCSSのプロパティ名を指定して自由な値を代入すれば変更できます。ただし、JavaScriptではハイフン記号「-」を使わない代わりに続く単語の先頭を大文字にして記述します。例えば上記の例にもあるbackground-colorプロパティの場合は「backgroundColor」と記述します。font-familyプロパティの場合は「fontFamily」のように記述します。list-style-typeプロパティの場合なら「listStyleType」です。

■7. エラーがなければ警告を消して配色を戻す

else {
  // ▼何も入力がないか、または指定文字しかないなら
  if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
  this.style.border = "1px solid black";
}

入力チェックの結果、何もエラーがなければエラーメッセージを消して、テキスト入力欄の配色も元に戻す必要があります。その処理が上記の5行です。もし「6」で枠線以外の装飾も変更しているなら、その装飾も元に戻す必要があります。

以上です。
ただし、上記のJavaScriptだけでは、ユーザが「送信」ボタンを押した際にエラーがあっても送信処理を中断はできません。エラーがある場合に送信処理を中止する方法は、本記事の最後でご紹介いたします。

次に、英字と特定の記号だけの入力に制限する書き方を見てみましょう。