JQueryなどで簡単にチェックできるライブラリも多いのですが、シンプルなJavascriptのメールフォームチェックについて。
通常の入力チェックから、メールアドレスの正誤チェック、ラジオボタンやチェックボックス、プルダウンメニューのselectタグやテキストエリアの文字数チェックなどについて記述します。
■値の入力チェック
空の場合はアラートポップアップウィンドウにエラーメッセージが表示される。
var flag;はチェック用の変数のいれもの。
if(document.mailform1.name.value == “”){
flag = 1;
message= message+’\n’+’名前を入力してください。’;
}
■メールアドレスの形式チェック
メールアドレスとして正しい書式かをチェックします
if(!document.mailform1.mail.value.match(/.+@.+\..+/)){
flag = 1;
message= message+’\n’+’メールアドレスは半角英数字で正しくご入力ください。’;
}
■セレクトボックスの選択チェック
プルダウンメニューのセレクトボックスの選択の有無をチェック
selectタグ内の選択されたオプションタグのvalueの値を取得して、正誤判定。
if(document.mailform1.selectbox1.options[document.mailform1.selectbox1.selectedIndex].value == “0”){
flag = 1;
message= message+’\n’+’セレクトボックスを選択してください。’;
}
■同一グループのラジオボタンの選択の有無をチェック
for(i = 0; i < document.mailform1.radiobox1.length; i ++){
if(document.mailform1.radiobox[i].checked){
flag = 1;
}
}
■テキストエリアの文字数チェック
テキストエリアに入力された文字数をチェック
if(document.mailform1.textarea1.value != ""){
txtarea = document.getElementById("textarea1").value;
txtarealeng = txtarea.length;
if(txtarealeng >100){
flag = 1;
message= message+’\n’+’文字数は100文字以内で入力してください。’;
}
}
■ポップアップアラートウィンドウの表示
flagに1が代入されたときに、アラートメッセージを表示させます。
if(flag){
window.alert(message);
return false;
}
else{
return true;
}