jQueryで数値判定【サンプルで解説】

CODE
スポンサーリンク
Toshi
Toshi
jQueryを独学で学習した際に、数値判定と文字の切り出しを理解するために 郵便番号を「XXX-XXXX」で打ち込まなければいけない。というサンプルコードを作ってみました!コードを見ながら数値判定と文字の切り出しについて理解をしていきましょう!

今回解説していく内容は以下です!

 本記事の内容

・jQueryで数値判定
・ソースコード
・コード解説


スポンサーリンク

jQueryで数値判定

今回、jQueryで作ったのはプログラムの動作は以下です。

inputボックスに値を入れて「XXX-XXXX」で打ち込まなければ「値がおかしいです…」というアラートが出てinputボックスの中の値がなくなってしまうというもの。

DEMOはCodePenで確かめてみてください!

See the Pen
郵便番号 XXX-XXXX 判定
by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

どうですか?XXX-XXXX」で打ち込まなければ値が消えてしまいますよね??

ソースコード

ここで、まずはじめに中身がどうなっているのかだけ見ておきましょう!

HTML
           
    <input class="text" type="text" maxlength="8" placeholder="XXX-XXXXで入力後Enter">
           
jQuery
            
    $('.text').on('change',function(){
       
              var zyuusyo0 = $('input.text').eq(0).val();
              var zyuusyoXX = $('input.text').eq(0).length;
              var kakunin1 = zyuusyo0.split('',8);
              
              var a = kakunin1[0];
              var b = kakunin1[1];
              var c = kakunin1[2];
              var d = kakunin1[3];
              var e = kakunin1[4];
              var f =  kakunin1[5];
              var g = kakunin1[6];
              var h = kakunin1[7];
                   
              var zyuusyoXX = $(kakunin1).length;
                          
             /* if(zyuusyoXX <= 3){
              window.alert('値がおかしいです…');
              $('input.text').eq(0).val('');
              }*/
                            
               var d = d.replace(kakunin1[3],'-');
                           
               var zyuusyo1 = $('input.text').eq(0);
               var zyuusyo2 = $(zyuusyo1).val().match(/^[-0-9]+$/);
                            
               if(zyuusyo0 === a+b+c+d+e+f+g+h){
               window.alert('郵便番号が打ち込まれました!');
               }else if(zyuusyo0 === zyuusyo2){
               window.alert('郵便番号が打ち込まれました!');
               }else{
               window.alert('値がおかしいです…');
               $('input.text').eq(0).val('');
               }
     });

コード解説

コードの解説はHTMLjQueryにわけて行ないます!

HTML

HTMLで指定した内容は以下です!

  1. input に jQuery で判断するための class名 をつけます
  2. maxlength=”8″ 最大文字数を8というふうに指定
  3. placeholder=”” で inputボックスの中に最初からいれておく文字の指定
<input class="text" type="text" maxlength="8" placeholder="XXX-XXXXで入力後Enter">

jQuery

  1. $(‘.text’).on(‘change’,function(){  // で inputボックスの値が変化した時の反応を確認します。
  2. var zyuusyo0 = $(‘input.text’).eq(0).val();   // inputボックス 0 番目の値を指定
  3. var zyuusyoXX = $(‘input.text’).eq(0).length; // inputボックスの 中にどのくらい数字がはいっているか
  4. var kakunin1 = zyuusyo0.split(”,8); // splitを使用し文字を8分割に
  5. var a = kakunin1[0]; … // 0〜7まで a〜h の変数に格納
  6. var zyuusyoXX = $(kakunin1).length;  // 分割したものを変数 zyuusyoXX」 に再格納
  7. var d = d.replace(kakunin1[3],’-‘); // .replaceを使うことにより、4文字めだけを に置換します。
  8. var zyuusyo2 = $(zyuusyo1).val().match(/^[-0-9]+$/); //  .matchを使うことに文字判定ができます。

.match(/^[0-9]+$/)では半角数値の0~9の判定ができ.match(/^[0-9]+$/)では0~9+ハイフンが含まれているかの判定ができます!

後は、if文を使って 判定していくだけです!

if(zyuusyo0 === a+b+c+d+e+f+g+h){  // もし インプットボックスの値が XXX-XXXX であれば

window.alert(‘郵便番号が打ち込まれました!’);

}else if(zyuusyo0 === zyuusyo2){ // XXX-XXXX の値が 0~9 と – のどれかであれば

window.alert(‘郵便番号が打ち込まれました!’);

}else{ // それ以外 「XXX-XXXX」 + 「XXX-XXXX の値が 0~9 と – 以外の文字が使われている場合は」

window.alert(‘値がおかしいです…’);

$(‘input.text’).eq(0).val(”);  // inputボックスの値を空にします

コードの全容が以下です。(コメントなし)

jQuery
            
    $('.text').on('change',function(){
       
              var zyuusyo0 = $('input.text').eq(0).val();
              var zyuusyoXX = $('input.text').eq(0).length;
              var kakunin1 = zyuusyo0.split('',8);
              
              var a = kakunin1[0];
              var b = kakunin1[1];
              var c = kakunin1[2];
              var d = kakunin1[3];
              var e = kakunin1[4];
              var f = kakunin1[5];
              var g = kakunin1[6];
              var h = kakunin1[7];
                   
              var zyuusyoXX = $(kakunin1).length;
                           
               var d = d.replace(kakunin1[3],'-');
                           
               var zyuusyo1 = $('input.text').eq(0);
               var zyuusyo2 = $(zyuusyo1).val().match(/^[-0-9]+$/);
                            
               if(zyuusyo0 === a+b+c+d+e+f+g+h){
               window.alert('郵便番号が打ち込まれました!');
               }else if(zyuusyo0 === zyuusyo2){
               window.alert('郵便番号が打ち込まれました!');
               }else{
               window.alert('値がおかしいです…');
               $('input.text').eq(0).val('');
               }
     });

 

まとめ

Toshi
Toshi

いかがでしたか?ちょっとわかりにくかったかもしれませんが、ソースコードをみたらなんとなくわかっていただけたのではないでしょうか?jQueryは使いやすく便利ですよね。数値判定は理解できたかと思うので、文字判定も解説できたらと思います

 

コメント