jQueryで文字の入力規制その2

前回は全角と半角英数の入力規制サンプルを紹介しましたが、今回はちょっと応用して電話番号の入力規制サンプルを紹介したいと思います。

<div id="sample">
<div>
電話番号入力の規制（携帯番号不可）<span class="red">半角数字のみ10桁入力規制</span><br />
<input type="text" name="tel1" class="w100" /> - <input type="text" name="tel2" class="w100" /> - <input type="text" name="tel3" class="w100" />
</div>
<span id="tel_alert"></span>
<div id="submit">入力チェック</div>
</div>

$(function() {
	$("#submit").click(function() {
		telchk();
	});
});
function telchk() {
	var str1 = $("input[name='tel1']").val();
	var str2 = $("input[name='tel2']").val();
	var str3 = $("input[name='tel3']").val();
	var str4 = str1 + str2 + str3;
	if(str1 == '' || str2 == '' || str3 == '') {
		$("#tel_alert").text("TELを入力して下さい。");
		return false;
	} else if(str4.match( /[^0-9]+/ ) || str4.length != 10) {
		$("#tel_alert").text("TELは半角数字10文字で入力して下さい。携帯番号は不可です。");
		return false;
	} else {
		$("#tel_alert").text('');
	}
}

解説

今回は以下の条件で入力規制をします。
1）半角数字
2）携帯番号不可
半角数字は前回と同様に正規表現で縛ります。携帯番号不可は固定電話が10桁なのに対し携帯電話は11桁なので入力の文字数で制限します。

前回同様最初のクリックイベントは、関数「telchk()」を実行するだけのスクリプトなので説明は省きます。

$(function() {
	$("#submit").click(function() {
		telchk();
	});
});

関数「telchk()」の中身を解説していきます。
変数「str1 ～3」で3つのテキストエリアのvalueを取得し、変数「str4」に全て格納します。

	var str1 = $("input[name='tel1']").val();
	var str2 = $("input[name='tel2']").val();
	var str3 = $("input[name='tel3']").val();
	var str4 = str1 + str2 + str3;

続いて入力のチェックです。
まずは3つのテキストエリアの内、空のものがないかをチェックします。

	if(str1 == '' || str2 == '' || str3 == '') {
		$("#tel_alert").text("TELを入力して下さい。");
		return false;

続いて今回の肝である半角数字のチェックと入力文字数をチェックします。
正規表現（/[^0-9]+/）を使って半角数字かどうかをチェックし、変数「str4」の文字数をlengthを使って調べます。もし10文字じゃなかったらアラートを表示します。

	} else if(str4.match( /[^0-9]+/ ) || str4.length != 10) {
		$("#tel_alert").text("TELは半角数字10文字で入力して下さい。携帯番号は不可です。");
		return false;

上記2つの条件文をクリアしたらOKです。