- ベストアンサー
JavaScript でメールアドレスのチェックをするには・・・？
入力フォームで正しいメールアドレスが入力されたのかを確認するため、以下のようなJavaScriptを記述しましたが、動作しません。 関数FormCheckは動作するのですが、関数Checkは動作しません。 現状では、メールアドレスを入力する欄に「www」とだけ入力しても チェックされないので、その他の入力項目がきちんと入力できていれば メール送信されてしまいます。 どのようにすればこのCheck関数が動作するのかどなたか教えていただけないでしょうか？よろしくお願いします。 --------------------Java Script 部分--------------------------- <script language="JavaScript"> <!-- //必須項目のチェック function FormCheck(Form) { Error = new Array(); i = 0; // 氏名の入力チェック if ((Form["name"]) && (Form["name"].value == "")) { Error[i] = "氏名は必須項目です。"; i++; } // メールアドレスの入力チェック if ((Form["email"]) && (Form["email"].value == "")) { Error[i] = "メールアドレスは必須項目です。"; i++; } // 質問したい支店の選択チェック if ((Form["address"]) && (Form["address"][0].selected == true)) { Error[i] = "質問したい支店は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("未入力項目があるので送信できません。\n\n"+ErrorText); return false; } } // --> <!-- //メールアドレスチェック var mail; function Check(){ mail = document.myform.email1.value; if(!mail.match(/.*@.*\..*/i)){ alert("メールアドレスが不正です。"); } } // --> </script> --------------------HTML 部分----------------------------------- <body> <table width="419" height="453"> <tr> <td width="732"> <form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self" onSubmit="return FormCheck(this);Check()"> <table width="481"> <!--氏名を入力 --> <tr> <td><strong>氏名</strong></td> <td><input type="text" name="name" size="30" maxlength="50"></td> </tr> <!--メールアドレスを入力 --> <tr> <td><strong>メールアドレス</strong></td> <td><input type="text" name="email" size="50" maxlength="60"></td> </tr> <!--支店選択 --> <tr> <td><strong>質問したい支店</strong></td> <td> <select name="address"> <option value="" selected></option> <option value="aaa@hoemail.com">A支店</option> <option value="bbb@hoemail.com">B支店</option> <option value="ccc@hoemail.com">C支店</option> </select> </td> </tr> </table> <!--送信・キャンセルボタン --> <center> <table> <tr> <td><input type="submit" name="submit" value="送 信"></td> <td><input type="reset" name="reset" value="キャンセル"></td> </tr> </table> </center> </form> </td> </tr> </table>
- apena2
- お礼率100% (5/5)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
※質問はなるべく分かりやすくしたほうが回答を得られやすいです。 ・TABLEタグやCENTERタグなど、必要でないタグは省く ■どのようにすればこのCheck関数が動作するのか Formタグにはonsubmit属性が定義されていますが、この内容だと Check関数は値をチェックした後の事後処理に過ぎないです。 まず、FormCheck関数が値(真偽)を返した地点で、そのフォームは 値に応じて送信してしまいます。 ですので、この場合はFormCheck関数とCheck関数を一つの関数に まとめてやる必要があります。 ■なるべく元のソースを使って一つの関数にまとめてみました。 function FormCheck(Form) { var Error = new Array(); // 氏名の入力チェック if ((Form.name) && (Form.name.value == "")) { Error.push("氏名は必須項目です。"); } // メールアドレスの入力チェック if ((Form.email) && (Form.email.value == "")) { Error.push("メールアドレスは必須項目です。"); } if (!document.myform.email.value.match(/.*@.*\..*/i)){ Error.push("メールアドレスが不正です。"); } // 質問したい支店の選択チェック if ((Form.address) && (Form.address[0].selected == true)) { Error.push("質問したい支店は必須項目です。"); } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("未入力項目があるので送信できません。\n\n" + ErrorText); return false; } } --------HTML--------- フォームのみ抜粋 <form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self" onSubmit="return FormCheck(this);"> ■スクリプトに対するアドバイス ・配列の要素の追加について 元のコードではi変数をカウンタとして要素を追加していましたね。 しかし、JavaScriptでは配列に要素を追加する関数としてpush関数が 用意されています。 非常によく使われる関数なので是非利用しましょう。 Error.push("message"); ・フォーム内のエレメントへのアクセスについて Form["email"]とするのも良いのですが、この場合は通常、 変数を利用してアクセスする場合に使用されます。 そのような用途がない場合は、普通に記述したほうが いいです。 Form.email ・元のコード、Check関数について var mail; function Check(){ mail = document.myform.email1.value; if(!mail.match(/.*@.*\..*/i)){ alert("メールアドレスが不正です。"); } } 少し突っ込んだ話になりますが、apena2さんのためになると思うので お話ししようと思います。 結論からいいますと、mail変数はローカル変数として宣言したほうが良いです。 この関数では、mail変数はグローバススコープすなわち、関数外で 宣言されていますよね。でも、Check関数を見る限りグローバル変数 である必要がありませんよね。 まず、これが第一の理由です。 そして、第2の理由についてですが、パフォーマンス面でのお話になります。 少しややこしくなるので、簡単に説明します。 Check関数がmail変数を参照するときに、まずCheck関数はローカルスコープ内(関数内)に mail変数がないか探索します。そして、見つからなかった場合は、グローバルスコープ すなわち関数外を探索することになります。。。 ということは、ローカル変数を探索するのに比べて、グローバルスコープを余分に 探索しなければならないので処理に時間がかかるのです。 このように、スコープチェーン(すみません、意味は調べてください)をたどるだけで パフォーマンスが著しく低下してしまうのです。
その他の回答 (2)
- okmotokun
- ベストアンサー率59% (92/155)
functionは1つでいいんでないの mail.match(/.*@.*\..*/i)ではチェックする意味ない（これだとアットマークドットだけでもＯＫ） --------------------Java Script 部分--------------------------- <script language="JavaScript"> <!-- //必須項目のチェック function FormCheck(Form) { Error = new Array(); i = 0; // 氏名の入力チェック if ((Form["name"]) && (Form["name"].value == "")) { Error[i] = "氏名は必須項目です。"; i++; } // メールアドレスの入力チェック if ((Form["email1"]) && (Form["email1"].value == "")) { Error[i] = "メールアドレスは必須項目です。"; i++; } // 質問したい支店の選択チェック if ((Form["address"]) && (Form["address"][0].selected == true)) { Error[i] = "質問したい支店は必須項目です。"; i++; } // 未入力があればアラート if (Error.length > 0) { ErrorText = Error.join("\n"); alert ("未入力項目があるので送信できません。\n\n"+ErrorText); return false; } var mail = document.myform.email1.value; if(mail.match(/^[-+\w\.]+\@[-\w\.]+\.[a-z]{2,5}$/i)==null){alert("メールアドレスが不正です。");return false;} } // --> </script> --------------------HTML 部分----------------------------------- <body> <table width="419" height="453"> <tr> <td width="732"> <form action="./cgi/test/sendmail.cgi" name="myform" method="POST" target="_self" onsubmit="return FormCheck(this)"> <table width="481"> <!--氏名を入力 --> <tr> <td><strong>氏名</strong></td> <td><input type="text" name="name" size="30" maxlength="50"></td> </tr> <!--メールアドレスを入力 --> <tr> <td><strong>メールアドレス</strong></td> <td><input type="text" name="email1" size="50" maxlength="60"></td> </tr> <!--支店選択 --> <tr> <td><strong>質問したい支店</strong></td> <td> <select name="address"> <option value="" selected></option> <option value="aaa@hoemail.com">A支店</option> <option value="bbb@hoemail.com">B支店</option> <option value="ccc@hoemail.com">C支店</option> </select> </td> </tr> </table> <!--送信・キャンセルボタン --> <center> <table> <tr> <td><input type="submit" name="submit" value="送 信"></td> <td><input type="reset" name="reset" value="キャンセル"></td> </tr> </table>
お礼
ご回答ありがとうございました。 参考にさせていただきます。
- zxcv0000
- ベストアンサー率56% (111/196)
document.myform.email1.value では、 <input type="text" name="email" ...> の value を拾えないでしょう。
お礼
ご回答ありがとうございました。
お礼
ご回答ありがとうございました。 教えていただきましたように修正をしたいと思います。 プログラミング初心者なのでパフォーマンス面までは 考えがおよびませんでした。 大変助かりました。ありがとうございました。