Javascript 入力チェック関数 && 簡易フレームワーク

入力チェック系関数

メールの文字文字列、必須チェック、電話番号チェックを用意 チェック関数を作成したらここで登録すれば追加できます

var _checkFunc = {}; // メール文字列チェック _checkFunc['email'] = function(mailaddr) { //このように関数を作成して登録で関数追加可能 if (mailaddr == "") { return true;//必須チェックは別に実施している前提 } var regs = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/; if (!mailaddr.match(regs)) { return false; } return true; } //必須チェック _checkFunc['mandatory'] = function(instr) { if (instr == "") { return false; } return true; } //電話番号チェック(携帯・0120あり) _checkFunc['tel'] = function(telno) { if (telno == "") { return true;//必須チェックは別に実施している前提 } var reg1 = /^\d{7,11}$/ var reg2 = /^\d{2,5}-\d{1,4}-\d{3,4}$/ if (telno.match(reg1)) {return true;} if (telno.match(reg2)) {return true;} return false; }

実際のチェック処理ループ

チェック関数を呼び出し、エラーの場合はエラーメッセージを出力 エラー発生部分にフォーカスする処理を実装しています

var check_alls = function(chkid, chkItems, msgid, errmsg) { var nchk = chkItems.length; //メッセージクリア処理 if (msgid != "") { document.getElementById(msgid).innerHTML = ""; } //チェック呼び出し関数 for (var j = 0; j < nchk; j++) { var inpstr = document.getElementById(chkItems[j]).value; if (!_checkFunc[chkid](inpstr)) { document.getElementById(chkItems[j]).focus(); if (msgid != "") { document.getElementById(msgid).innerHTML = errmsg; } return false; } } // end of for //メッセージクリア処理 if (msgid != "") { document.getElementById(msgid).innerHTML = ""; } return true; }

Copyright(C) SIMPLEONE BLOG.(J.Yamada) 2020- All rights reserved.