【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('');
               }
     });

コード解説

コードの解説は「HTML」と「jQuery」にわけて行ないます！

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('');
               }
     });

 

まとめ