JavaScript 入力チェック

JavaScriptで各入力チェックを行います。

数値チェック

数値以外が入力されたらエラーとしています。+、-、カンマ、ドットが含まれていてもOKとしてます。これらNGとする場合、「+、-、カンマ、ドットの削除」の部分を編集して下さい。

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>テストページ</title>
	<script type="text/javascript">

		function check(obj) {
			if (!isNumber(obj.value)) {
				var label = "-";
				if (document.querySelector('label[for="' + obj.id + '"]')) {
					label = document.querySelector('label[for="' + obj.id + '"]').textContent;
				}
				alert("数値ではありません。("
					+ label
					+ ")");
				obj.focus();
			}
		}

		//数値チェック
		function isNumber(val) {
			//値がセットされていない場合、不正
			if (!val) return false;

			//+、-、カンマ、ドットの削除
			val = val.replace(/[\+,\-,\.,\,]/g, '');

			//整数
			var re = /^\d*$/;

			// 数値チェック
			return re.test(val);
		}
	</script>

</head>

<body>
	<label for="test1">数値入力</label>
	<input type="text" id="test1" onchange="check(this)" />
</body>

</html>

日付チェック

日付が不正の場合、エラーとしています。日付チェック(スラッシュ付き)は内部で日付チェックを読んでいるので、コピペする場合は両方コピーして下さい。

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>テストページ</title>
	<script type="text/javascript">

		function check(obj) {
			if (!isDateSlash(obj.value)) {
				var label = "-";
				if (document.querySelector('label[for="' + obj.id + '"]')) {
					label = document.querySelector('label[for="' + obj.id + '"]').textContent;
				}
				alert("日付ではありません。("
					+ label
					+ ")");
				obj.focus();
			}

		}

		//日付チェック(スラッシュ付き)
		function isDateSlash(val) {
			//値がセットされていない場合、不正
			if (!val) return false;

			//スラッシュで分割
			var ary = val.split("/");
			if (ary.length != 3) {
				return false;
			}

			//日付チェック呼び出し
			return isDate(('0000' + ary[0]).slice(-4)
				+ ('00' + ary[1]).slice(-2)
				+ ('00' + ary[2]).slice(-2));
		}

		//日付チェック
		function isDate(val) {
			//値がセットされていない場合、不正
			if (!val) return false;

			//8桁以外は不正
			if (val.length != 8) return false;

			//整数
			var re = /^\d*$/;

			// 数値チェック
			if (!re.test(val)) {
				return false;
			}

			//過去日チェック
			//if (val < getYYYYMMDD()) {
			//	return false;
			//}

			//文字列から日付オブジェクトに変換
			var year = parseInt(val.substr(0, 4));
			//月は0スタートのため-1する
			var month = parseInt(val.substr(4, 2)) - 1;
			var day = parseInt(val.substr(6, 2));
			var dt = new Date(year, month, day);

			//日付不正チェック
			return (year == dt.getFullYear() && month == dt.getMonth() && day == dt.getDate());
		}

		//システム日付をyyyyMMdd形式で取得
		function getYYYYMMDD() {
			var dt = new Date();

			return dt.getFullYear()
				+ ("00" + (dt.getMonth() + 1)).slice(-2)
				+ ("00" + dt.getDate()).slice(-2);
		}
	</script>

</head>

<body>
	<label for="test1">日付入力</label>
	<input type="text" id="test1" onchange="check(this)" />
</body>

</html>

全角、半角カナ入力チェック

全角、半角が含まれる場合、エラーとしています。半角カナをOKとする場合、「\xA1-\xDF」を削除して下さい。

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>テストページ</title>
	<script type="text/javascript">

		function check(obj) {
			if (existJ(obj.value)) {
				var label = "-";
				if (document.querySelector('label[for="' + obj.id + '"]')) {
					label = document.querySelector('label[for="' + obj.id + '"]').textContent;
				}
				alert("全角または半角カナが含まれています。("
					+ label
					+ ")");
				obj.focus();
			}
		}

		//全角、半角カナを含む
		function existJ(val) {

			//値がセットされていない場合、チェック終了
			if (!val) return false;

			//全角、半角カナが含まれる
			var re = /[^\x01-\x7E\xA1-\xDF]/;
			//すべて全角、半角カナ
			//var re = /^[^\x01-\x7E\xA1-\xDF]+$/;
			//すべて全角
			//var re = /^[^\x01-\x7E]+$/;

			//全角、半角カナ存在チェック
			return re.test(val);
		}
	</script>

</head>

<body>
	<label for="test1">全角、半角カナ以外入力</label>
	<input type="text" id="test1" onchange="check(this)" />
</body>

</html>

バイト数チェック

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>テストページ</title>
	<script type="text/javascript">

		function check(obj, max) {
			//指定バイトを超えた場合、エラー
			if (overLength(obj, max)) {
				return;
			}
		}

		//バイト数を取得
		function overLength(obj, max) {
			//値がセットされていない場合、チェックしない
			if (!obj) return false;
			if (!obj.value) return false;

			//バイト数取得
			var len = encodeURIComponent(obj.value).replace(/%../g, "x").length;

			//長さ比較
			if (len > max) {
				var label = "-";
				if (document.querySelector('label[for="' + obj.id + '"]')) {
					label = document.querySelector('label[for="' + obj.id + '"]').textContent;
				}
				alert("指定サイズを超えました。("
					+ label
					+ "、入力バイト数："
					+ len
					+ "、最大バイト数："
					+ max
					+ ")");
				obj.focus();
				return true;
			}

			return false;
		}
	</script>

</head>

<body>
	<label for="test1">バイト数チェック(5バイト)</label>
	<input type="text" id="test1" onchange="check(this, 5)" />
	<br />
	<label for="test2">バイト数チェック(10バイト)</label>
	<input type="text" id="test2" onchange="check(this, 10)" />
</body>

</html>

クラスでチェック対象を指定

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>テストページ</title>
	<script type="text/javascript">

		function check(obj) {
			if (!isNumber(obj.value)) {
				var label = "-";
				if (document.querySelector('label[for="' + obj.id + '"]')) {
					label = document.querySelector('label[for="' + obj.id + '"]').textContent;
				}
				alert("数値ではありません。("
					+ label
					+ ")");
				obj.focus();
				return false;
			}
			return true;
		}

		//数値チェック
		function isNumber(val) {
			//値がセットされていない場合、不正
			if (!val) return false;

			//+、-、カンマ、ドットの削除
			val = val.replace(/[\+,\-,\.,\,]/g, '');

			//整数
			var re = /^\d*$/;

			// 数値チェック
			return re.test(val);
		}

		//クラス指定でチェック
		function exec() {
			var elements = document.getElementsByClassName("num");
			for (var i = 0; i < elements.length; i++) {
				if (!check(elements[i])) {
					return;
				}
			}
		}
	</script>

</head>

<body>
	<label for="test1">数値入力</label>
	<input type="text" id="test1" class="num" />
	<label for="test2">数値入力</label>
	<input type="text" id="test2" class="num chk" />
	<button onclick="exec();">チェック</button>
</body>

</html>

ページのトップへ戻る