Web画面でよく用いるJavaScriptの入力チェック色々
バリデーション系の処理って、JavaScriptで案件変わる度に一から書かにゃならんのですよねぇ。資産取っとけや、と言いたいんですが、なぜかどこの会社もやらない。まぁ実装が簡単だとか色々あるんでしょうな。ただオレ自身が一から書くのはもう正直面倒なので、備忘録的にここに書いておきます。
/** * 値が入力されているかチェック(必須入力チェック) * @param obj 入力された値 */ function requireCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 書式チェック if(obj.value == "" || obj.value.length == 0) { obj.focus(); return false; } return true; } /** * 入力された値のバイト数最大値チェック * @param obj 入力された値 * @param max 最大文字数 * @return 正:true / 誤:false */ function maxLengthCheck(obj, max) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; var i; var size = 0; for(i = 0; i < obj.value.length; i++) { var c = obj.value.charCodeAt(i); if(c > 127) { size++; } size++; } if(size > max) { obj.focus(); return false; } return true; } /** * 入力された値のバイト数最小値チェック * @param obj 入力された値 * @param min 最小文字数 * @return 正:true / 誤:false */ function minLengthCheck(obj, min) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; var i; var size = 0; for(i = 0; i < obj.value.length; i++) { var c = obj.value.charCodeAt(i); if(c > 127) { size++; } size++; } if(size < min) { obj.focus(); return false; } return true; } /** * 入力された値がyyyy/mm/dd形式になっているかチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function dateCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; var correct = true; // 書式チェック if( !obj.value.match(/^\d{4}\/\d{2}\/\d{2}$/)) correct = false; // 入力値から年・月・日を個別に取得 var y = obj.value.substr(0, 4) - 0; var m = obj.value.substr(5, 2) - 1; // 月は0-11で表現 var d = obj.value.substr(8, 2) - 0; // 月・日の妥当性チェック if(m < 0 || m > 11 && d < 1 && d > 31) correct = false; var dt = new Date(y, m , d); if(isNaN(dt)) correct = false; if(dt.getFullYear() != y || dt.getMonth() != m || dt.getDate() != d) correct = false; if(! correct) { obj.focus(); } return correct; } /** * 入力された値2つが期間のはじまりとおわりとして適切な順番になっているかチェック * ※注意!:かならずdateCheck()実行後に呼び出すこと * @param objS 入力された値:期間指定のはじまり * @param objE 入力された値:期間指定の終わり * @return 正:true / 誤:false */ function daterangeCheck(objS, objE) { // 文字列長0はチェックしない if(objS.value == "" || objE.value == "" || objS.value.length == 0 || objE.value.length == 0) return true; // 入力値から年・月・日を個別に取得 var sy = objS.value.substr(0, 4) - 0; var sm = objS.value.substr(5, 2) - 1; // 月は0-11で表現 var sd = objS.value.substr(8, 2) - 0; var ey = objE.value.substr(0, 4) - 0; var em = objE.value.substr(5, 2) - 1; // 月は0-11で表現 var ed = objE.value.substr(8, 2) - 0; var sdt = new Date(sy, sm , sd); var edt = new Date(ey, em , ed); if(sdt.valueOf() > edt.valueOf()) { objS.focus(); return false; } return true; } /** * 入力された日付が未来の日付かチェック * ※事前に必ず日付妥当性をチェックすること! * @param obj 入力された値 * @return 正:true / 誤:false */ function futureDateCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 入力値から年・月・日を個別に取得 var y = obj.value.substr(0, 4) - 0; var m = obj.value.substr(5, 2) - 1; // 月は0-11で表現 var d = obj.value.substr(8, 2) - 0; // 月・日の妥当性チェック if(m < 0 || m > 11 && d < 1 && d > 31) correct = false; var idt = new Date(y, m , d); // 入力された日付 var cdt = new Date(); // 現在日付 if(idt.valueOf() > cdt.valueOf()) { objS.focus(); return false; } return true; } /** * 入力された値が半角英数字か否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function oneByteCharCheck(obj, ) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; if(! /^[a-zA-Z0-9]+[\w\.-_]*$/.test(obj.value)) { obj.focus(); return false; } return true; } /** * 入力された値が半角数値か否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function halfNumCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; // 正規表現チェック if(! /^[-]?[0-9]+(\.[0-9]+)?$/.test(obj.value)) { obj.focus(); return false; } return true; } /** * 入力された値がintか否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function intCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; // 正規表現チェック if(! halfNumCheck(obj)) return false; // 範囲チェック if(obj.value < 0 || obj.value > 2147483647) { obj.focus(); return false; } return true; } /** * 入力された値が電話番号として適切か否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function telCheck(obj1, obj2, obj3, ) { // 値のtrim obj1.value = obj1.value.trim(); obj2.value = obj2.value.trim(); obj3.value = obj3.value.trim(); // 文字列長0はチェックしない if( (obj1.value == "" || obj1.value.length == 0) && (obj2.value == "" || obj2.value.length == 0) && (obj3.value == "" || obj3.value.length == 0)) return true; if(! ((obj1.value != "" && obj1.value.length != 0) && (obj2.value != "" && obj2.value.length != 0) && (obj3.value != "" && obj3.value.length != 0))) { obj1.focus(); return false; } // 文字列長チェック if(! lengthCheck(obj1, , 4)) return false; if(! lengthCheck(obj2, , 4)) return false; if(! lengthCheck(obj3, , 4)) return false; if(11 < (obj1.value.length + obj2.value.length + obj3.value.length)) { obj1.focus(); return false; } if(10 > (obj1.value.length + obj2.value.length + obj3.value.length)) { obj1.focus(); return false; } // 正規表現チェック if(! halfNumCheck(obj1, )) return false; if(! halfNumCheck(obj2, )) return false; if(! halfNumCheck(obj3, )) return false; // 日本の電話番号の先頭には0以外は利用できない if(obj1.value.substr(0,1) != "0") { obj1.focus(); return false; } return true; } /** * 入力された値がメールアドレス形式か否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function mailAddressCheck(obj, ) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; if(! /^[A-Za-z0-9]+[\w\.-]+@[\w\.-]+\.\w{2,}$/.test(obj.value)) { obj.focus(); return false; } return true; } /** * 入力された値が色コード形式か否かチェック * @param obj 入力された値 * @return 正:true / 誤:false */ function colorCodeCheck(obj, ) { // 値のtrim obj.value = obj.value.trim(); // 文字列長0はチェックしない if(obj.value == "" || obj.value.length == 0) return true; // バイト数チェック if(! lengthCheck(obj, , 6)) return false; if(! minLengthCheck(obj, , 6)) return false; //000000〜FFFFFFが指定されているかチェック if(! /^[0-9A-Fa-f]+$/.test(obj.value)) { obj.focus(); return false; } return true; } /* * Stringにtrim()を定義。前方および後方の半角スペースと全角スペースを削除する。 */ String.prototype.trim = function() { return this.replace(/^[ ]+|[ ]+$/g, ''); }
大した内容じゃないし、そもそもオレ自身もどこかのサイトを参考に書いたものですので、良かったら好きに使ってください。掲載するにあたって動作確認はしてないので、バグがあっても自己責任でw。