JavaScriptを使用しています。Javascript でフォームの入力チェックを行う
Category - Javascript のメモ - [1]
入力チェック内容を指定して、フォームの入力チェックを行います。
まずはHTMLで入力フォームを作ります。
（入力フォームは Form1 とする。）
（入力項目は InputA, InputB, InputC とする。）
（送信ボタンを押すと入力チェックして送信するものとする。）
★HTML
<form action="#" method="POST" name="Form1" id="Form1"> 半角英数:<input type="text" name="InputA" id="InputA" /> *必須<br> 整数値:<input type="text" name="InputB" id="InputB" /> *必須<br> 郵便番号:<input type="text" name="InputC" id="InputC" /> </form> <input type="button" value="送信" onClick="CheckAndSend()" />
次にJavasciptを記述します。
CheckAndSend() という関数を作り、Form1 の入力項目 InputA, InputB, InputC をまとめてチェックし、送信を行います。
実際のチェックは checkInputVal() という関数を作って行います。
★Javascipt
//-------------------------------------------------------------------
// 入力値チェックと送信
//-------------------------------------------------------------------
function CheckAndSend(){
var nErr = 0;
var sMsg = '';
// InputA, InputB, InputC の入力チェック
if (nErr == 0 && !checkInputVal('AN','InputA',1)) { nErr = 1; sMsg = '！半角英数の入力値が不正です。'; }
if (nErr == 0 && !checkInputVal('N','InputB',1)) { nErr = 1; sMsg = '！整数値の入力値が不正です。'; }
if (nErr == 0 && !checkInputVal('Y','InputC')) { nErr = 1; sMsg = '！郵便番号の入力値が不正です。'; }
if (nErr > 0) { alert(sMsg); return; }
if (confirm("送信しますか？")) document.getElementById('Form1').submit(); // フォーム送信
};
//-------------------------------------------------------------------
// 入力チェック（入力必須の場合は第3引数を 1 にする。ctrlIdNmのオブジェクトが見つからない時は無視する（＝1を返す）場合は第4引数を 1 にする。）
//-------------------------------------------------------------------
function checkInputVal(chkType, ctrlIdNm){
// chkType = 'N' … 整数値かチェック
// chkType = 'F' … 数値（小数点も許可）かチェック
// chkType = 'A' … 半角英字かチェック（半角スペース、ピリオド、ハイフンも許可）
// chkType = 'AN' … 半角英数字かチェック（半角スペース、ピリオド、ハイフンも許可）
// chkType = 'K' … カタカナかチェック（半角・全角スペースも許可）
// chkType = 'H' … ひらがなかチェック（半角・全角スペースも許可）
// chkType = 'KH' … カタカナ・ひらがなかチェック（半角・全角スペースも許可）
// chkType = 'Y' … 郵便番号かチェック
// chkType = 'T' … 電話番号かチェック
// chkType = 'M' … メールアドレスかチェック
// chkType = 'D' … 日付形式（YYYY/MM/DD or YYYY/M/D）かチェック
// chkType = 'DM' … 日付形式（YYYY/MM or YYYY/M）かチェック
// chkType = 'S' … 何でもアリ（文字のチェックはしない）
var i = 1;
var n;
var nNum;
var bNeedFlg = 0;
if (arguments.length > 2) bNeedFlg = arguments[2]; // 第3引数まであれば代入
var bNothingOkFlg = 0;
if (arguments.length > 3) bNothingOkFlg = arguments[3]; // 第4引数まであれば代入
if (document.getElementById(ctrlIdNm)) {
var val = document.getElementById(ctrlIdNm).value;
if (val.length > 0) {
switch (chkType) {
case 'N':
if (val.match( /[^0-9]+/ )) {
i = 0;
}else{
if (isNaN(val)) i = 0;
}
break;
case 'F':
if (val.match( /[^0-9.]+/ )) {
i = 0;
}else{
if (isNaN(val)) i = 0;
}
break;
case 'A':
if (val.match( /[^A-Za-z\s.-]+/ )) i = 0;
break;
case 'AN':
if (val.match( /[^0-9A-Za-z\s.-]+/ )) i = 0;
break;
case 'K':
if (val.match( /[^ァ-ンーヴ \s]+/ )) i = 0; // ※ \s は空白文字（半角スペースやタブ、全角スペースは含まない）。「 」は全角スペース。
break;
case 'H':
if (val.match( /[^ぁ-んー \s]+/ )) i = 0;
break;
case 'KH':
if (val.match( /[^ぁ-んァ-ンーヴ \s]+/ )) i = 0;
break;
case 'Y':
if (val.match( /[^0-9-]+/ )) {
i = 0;
}else{
n = val.indexOf('-');
if (n >= 0) {
if (val.length != 8 || n != 3 || n != val.lastIndexOf('-')) i = 0;
}else{
if (val.length != 7) i = 0;
}
}
break;
case 'T':
if (val.match( /[^0-9-]+/ )) {
i = 0;
}else{
n = val.indexOf('-');
nNum = val.lastIndexOf('-');
if (n >= 0) {
if (val.length < 12 || n == 0 || n == nNum || nNum == (val.length - 1)) i = 0;
}else{
if (val.length < 10) i = 0;
}
}
break;
case 'M':
if (!val.match( /.+@.+\..+/ )) i = 0;
break;
case 'D':
if (val.match( /[^0-9\/]+/ )) i = 0;
if (!val.match( /(\d{4})\/(\d{2})\/(\d{2})/ ) && !val.match( /(\d{4})\/(\d{1})\/(\d{1})/ ) && !val.match( /(\d{4})\/(\d{2})\/(\d{1})/ ) && !val.match( /(\d{4})\/(\d{1})\/(\d{2})/ )) i = 0;
// 有効な日付かチェック
if (i > 0) {
n = val.indexOf('/');
nNum = val.lastIndexOf('/');
var stY = val.substring(0,n);
var stM = val.substring(n+1,nNum);
var stD = val.substring(nNum+1);
if (stY.length != 4 || stM.length > 2 || stM.length < 1 || stD.length > 2 || stD.length < 1) {
i = 0;
}else{
var y = parseInt(stY,10);
var m = parseInt(stM,10);
var d = parseInt(stD,10);
if (y < 1920 || y > 2100 || m < 1 || m > 12 || d < 1 || d > 31) {
i = 0;
}else{
//alert(y + '/' + m + '/' + d);
var ymd = new Date(y, m-1, d);
if (d != ymd.getDate() || m != (1+ymd.getMonth()) || y != ymd.getFullYear()) i = 0;
}
}
}
break;
case 'DM':
if (val.match( /[^0-9\/]+/ )) i = 0;
if (!val.match( /(\d{4})\/(\d{2})/ ) && !val.match( /(\d{4})\/(\d{1})/ )) i = 0;
// 有効な日付かチェック
if (i > 0) {
n = val.indexOf('/');
var stY = val.substring(0,n);
var stM = val.substring(n+1);
if (stY.length != 4 || stM.length > 2 || stM.length < 1 || n != val.lastIndexOf('/')) {
i = 0;
}else{
var y = parseInt(stY,10);
var m = parseInt(stM,10);
var d = 1;
if (y < 1920 || y > 2100 || m < 1 || m > 12) {
i = 0;
}else{
//alert(y + '/' + m + '/' + d);
var ymd = new Date(y, m-1, d);
if (d != ymd.getDate() || m != (1+ymd.getMonth()) || y != ymd.getFullYear()) i = 0;
}
}
}
break;
}
}else{
if (bNeedFlg > 0) i = 0;
}
} else {
if (bNothingOkFlg == 0) i = 0;
}
return i;
};
動作確認はこちらにて。