【jQuery】数値判定をしよう (サンプル有り)

Toshi

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

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

本記事の内容

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

jQueryで数値判定
ソースコード
コード解説
1. HTML
2. 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で指定した内容は以下です！

input に jQuery で判断するための class名をつけます
maxlength=”8″ 最大文字数を8というふうに指定
placeholder=”” で inputボックスの中に最初からいれておく文字の指定

<input class="text" type="text" maxlength="8" placeholder="XXX-XXXXで入力後Enter">

jQuery

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