【jQuery】テキストボックスに半角数字/半角英数字が入っているか判定させる方法

今回はテキストボックスに半角数字/半角英数字が入っているか？

それとも別の文字が入っているのかを判定する方法を紹介していきたいと思います。

半角数字が入っているかをチェックする

html

<input type="text" value="" placeholder="半角数字を入力してください" class="textbox">
<p class="msg"></p>

今回はテキストボックスとテキストボックスに入力された値が半角数字かそれ以外かを判断して「msg」クラスの要素にテキストを表示させます。

jQuery

jQuery(function () {
	jQuery('.textbox').on('change', function () {
		let check_num = jQuery(this).val();
		if(check_num.match(/[^0-9]/)){
			jQuery('.msg').text('半角数字以外が入っています。');
		}else{
			jQuery('.msg').text('半角数字が入っています。');
		}
	});
});

入力された値はmatchメソッドで正規表現を使い半角数字かどうかを判断します。

if(check_num.match(/[^0-9]/)){}

半角数字が入っている場合は「半角数字が入っています。」というテキストを画面に表示させ半角数字以外が入っている場合は「半角数字以外が入っています。」というテキストを画面に表示させます。

サンプル

半角英数字が入っているかをチェックする

次は半角数字だけでなく半角英字も入力されているか判断する書き方になります。

html

<input type="text" value="" placeholder="半角数字を入力してください" class="textbox">
<p class="msg"></p>

jQuery

jQuery(function () {

        jQuery('.textbox').on('change', function () {          
                let checkMenu1 = jQuery('.textbox').val();

                // 半角英数字チェック
                if (checkMenu1.match(/[^A-Za-z0-9]+/)) {     
                  //半角英数字以外
                  jQuery('.msg').text('半角英数字ではありません。');
                } else {
                  //半角英数字
                  jQuery('.msg').text('半角英数字です。');
                }
        });
});

サンプル