ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

Javascriptでメール送信フォームいろいろなチェック

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の値を取得して、正誤判定。
  .............................
        flag = 1;
        message= message+'\n'+'セレクトボックスを選択してください。';
    }

■同一グループのラジオボタンの選択の有無をチェック

....................................++){
      if(document.mailform1.radiobox[i].checked){
            flag = 1;
        }
    }
   
■テキストエリアの文字数チェック

テキストエリアに入力された文字数をチェック
   
............................................................
        txtarealeng = txtarea.length;
        if(txtarealeng >100){
            flag = 1;
            message= message+'\n'+'文字数は100文字以内で入力してください。';
        }
    }


■ポップアップアラートウィンドウの表示

flagに1が代入されたときに、アラートメッセージを表示させます。

    if(flag){
        window.alert(message);
        return false;
    }
    else{
        return true;
    }