もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第11回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(3)

この記事を読むのに必要な時間:およそ 13 分

電話番号のバリデーション

さて,正規表現の練習はここまでにして,ここからは前回に続いて,フォームでの実践例をご紹介します。

前回はメールアドレスの入力チェックの例をご紹介しましたが,今回は電話番号,数値のみかどうか,アルファベットのみかどうか,正しいURLの入力か,必須項目の場合…のバリデーション実装例をご紹介します。

まずは電話番号のバリデーションを紹介します。電話番号のバリデーションは,メールほど難しくないのですが,どこまでの入力をチェックするのかを,あらかじめ決めておく必要があります。どこまでというのは,ハイフンを含めた入力にするのか,ハイフンが無くてもいいのかなどです。

それらも含めて,電話番号の入力チェックをいくつかご紹介いたします。

電話番号バリデーションの実装

今回の作りの前提として,一つの入力欄に電話番号を入れるものとします。場合によっては,ハイフンの位置ごとに入力欄を設ける場合もあるのですが,今回は入力欄一つのもので作ります。

この場合,ハイフンを入れておくかどうかで処理が変わってくるのですが,ユーザビリティーを考える場合,どちらでも対応できるようしておくのが便利だと思います。ハイフンなしで入力と書いても,それを見逃してハイフンありで入力してしまう人もいるかもしれないので,そのような人のために,どちらでも対応できるようにしておくのがいいでしょう。

電話番号チェックのコード

jQuery(function($){
  $('#phone').bind('keyup blur',function(){
    var txt = $(this).val();
    var txtRep =  txt.replace(/-/g,'');
    var txtLength = txtRep.length;

    if(txt && txtLength>0){
      if(txtLength===10 || txtLength===11){
        if(txt.match(/\d+-?\d+-?\d+/)){
          $(this).next().remove().end().after('<span class="ok">valid</span>');
        }else{
          $(this).next().remove().end().after('<span class="err">invalid</span>');
        }
      }else{
        $(this).next().remove().end().after('<span class="err">invalid</span>');
      }
      
    }else{
      $(this).next().remove();
    }
  });
});

基本的な作りは前回のものとほぼ同じです。違う点は,正規表現部分と,電話番号の桁数チェックを行うくらいです。

ハイフンを含めていてもいなくとも,数字が10桁もしくは11桁の入力があるまではinvalidを表示し※1⁠,10・11桁になった時に正規表現のチェックをかけて,番号の入力に問題がないかどうかを調べるようにします。

今回の正規表現は「\d+-?\d+-?\d+」の部分で,下記の通りです。

「\d+-?\d+-?\d+」を分解

パターン(赤文字部分)説明
\d+数値が一文字以上の連続
-?ハイフンを含めるもしくは含めない

文字で書くとしたら「数値の連続+ハイフン(有り無しどちらでも)+数値の連続+ハイフン(有り無しどちらでも)+数値の連続」となります。

※1)
固定電話は市外局番を含めて10桁,携帯やIP電話は11桁と決まっているため

繰り返しの「g」

文字数については,HTML側で「maxlength="13"」を入れておくと,ハイフン含め13文字以上は入力ができなくなります。また,正規表現部分で文字数のチェックをいれる方法もあるのですが,上記の例では入れておらず,Script側で,入力の数値が10文字か11文字かをチェックしています。

また,入力のチェックでは,数値だけをチェックしたいので,ハイフンをチェックの歳に抜き取るようにしています。

ハイフンの処理

var txtRep =  txt.replace(/-/g,'');

このコードの「/-/g」の部分は正規表現であり,最後のスラッシュの次に「g」を入れておくと,テキスト全体を繰り返しチェックしてくれるようになります。ちなみに「txt.replace('-','')」としてしまうと,最初のハイフンしか取り除けないので注意です。複数同じ文字を抜き取る場合は,正規表現を使い,最後に「g」を指定するようにしましょう。

11桁チェックの歳の問題

先程のサンプルを使ってみた人は,すでにお気づきかもしれないですが,先程のコードでは,携帯電話などの11桁番号をチェックする前に,10桁の入力があった時点で「valid」の表示が出てしまうようになってしまいます。

10桁時点でvalidになってしまう

10桁時点でvalidになってしまう

これをうまく回避するために,携帯電話番号やIP電話番号の入力の際は11桁の入力にならないとvalidにならないようにする分岐を入れたものを作成してみます。

電話番号バリデーションの実装(その2)

11桁の番号入力があるケースは,携帯電話は090,080の番号と,PHSの070の番号,それとIP電話の050の4パターンが考えられます(ここではフリーダイヤルなどのケースを除きます⁠⁠。つまり,入力部分の最初がそれらの番号の場合は11桁にならないとチェックされないようにするだけです。

電話番号チェックのコード(改良1)

jQuery(function($){
  $('#phone').bind('keyup blur',function(){
    var self = $(this);
    var txt = self.val();
    var txtRep =  txt.replace(/-/g,'');
    var txtLength = txtRep.length;
    
    var message = function(flg){
      var checkClass = flg?'ok':'err';
      var check = flg?'valid':'invalid';
      self.next().remove().end().after('<span class="'+checkClass+'">'+check+'</span>');
    }

    if(txt && txtLength>0){
      if(txt.match(/^0(9|8|7|5)0/)){
        if(txtLength===11){
          if(txt.match(/\d+-?\d+-?\d+/)){
            message(true);
          }else{
            message()
          }
        }else{
          message();
        }
      }else if(txtLength===10){
        if(txt.match(/\d+-?\d+-?\d+/)){
          message(true);
        }else{
          message();
        }
      }else{
        message();
      }
      
    }else{
      $(this).next().remove();
    }
  });
});

先程との変更点は,全体的にコードが長くなったので,validとinvalidを表示させる部分をあらかじめまとめたのと,携帯電話などのための分岐を加えただけです。

分岐が多くなっているので,複雑に見えますが,携帯電話などの番号かどうかのチェックをし,その後桁数のチェック,最後にその入力が正しい電話番号の入力かをチェックしているものになっています。

携帯などのチェックは,最初が090などの番号かどうかという正規表現でチェックをしています。

携帯,PHS,IP電話のチェック

txt.match(/^0(9|8|7|5)0/)

「^0(9|8|7|5)0」を分解

パターン(赤文字部分)説明
^~で始まる
0(9|8|7|5)00×0の形で,且つ,×の部分が9か8か7か5のいずれか(090,080,070,050)

これで携帯番号などの時は11桁の入力が無ければvalidにならないようになりますし,その他の固定電話などの時は10桁でvalidになります。

画像

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/