JavaScript でメールアドレスのチェックをするには・・・？

Question

入力フォームで正しいメールアドレスが入力されたのかを確認するため、以下のようなJavaScriptを記述しましたが、動作しません。関数FormCheckは動作するのですが、関数Checkは動作しません。現状では、メールアドレスを入力する欄に「www」とだけ入力してもチェックされないので、その他の入力項目がきちんと入力できていればメール送信されてしまいます。どのようにすればこのCheck関数が動作するのかどなたか教えていただけないでしょうか？よろしくお願いします。 --------------------Java Script 部分--------------------------- --------------------HTML 部分-----------------------------------

heikuu2009 · Accepted Answer

※質問はなるべく分かりやすくしたほうが回答を得られやすいです。
・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("
");
        alert ("未入力項目があるので送信できません。

" + 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変数がないか探索します。そして、見つからなかった場合は、グローバルスコープ
すなわち関数外を探索することになります。。。

ということは、ローカル変数を探索するのに比べて、グローバルスコープを余分に
探索しなければならないので処理に時間がかかるのです。

このように、スコープチェーン(すみません、意味は調べてください)をたどるだけで
パフォーマンスが著しく低下してしまうのです。

okmotokun · Answer

functionは1つでいいんでないの mail.match(/.*@.*\..*/i)ではチェックする意味ない（これだとアットマークドットだけでもＯＫ） --------------------Java Script 部分--------------------------- --------------------HTML 部分-----------------------------------

zxcv0000 · Answer

document.myform.email1.value では、 <input type="text" name="email" ...> の value を拾えないでしょう。

JavaScript でメールアドレスのチェックをするには・・・？

※質問はなるべく分かりやすくしたほうが回答を得られやすいです。

functionは1つでいいんでないの

document.myform.email1.value では、 <input type="text" name="email" ...> の value を拾えないでしょう。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング