jQueryでメールアドレスのバリデートを行いたい

Question

お疲れ様です。

表題の通りです。

以下のバリデートが機能していません。
正しい形式のメールアドレスを投げても、全て.matchの結果がnullで
コンソールに表示されてしまいます。

        // メールアドレスが入力されていれば、バリデート
        if ($('#mail-address').val() == '') {
            displayErrorMessage('.error-mail-address', error_no_input)
        } else {
            if (validateMailAddress($('#mail-address').val()) == false) {
                displayErrorMessage('.error-mail-address', error_mail_address)
            }
        }

    // メールアドレスバリデーション
    function validateMailAddress(value) {
        /////// 確認用 /////////
        console.log(value)
        console.log(value.match('/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/'));
        /////// 確認用 /////////
        if (value.match('/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/')) {

            return true;
        }

        return false;
    };

どこに問題があるのでしょうか。。。。。

「a」「b」などの明らかにメールアドレスとしてありえない文字と、
個人のメールアドレスなどを試しましたが、全てnullで返ってきます。

コンソールでの確認は「確認用」というコメントアウトで挟まれている部分で行いました。。。。

Comments

[m.ts10806]

これだけ提示されても他者は再現確認できません。
呼び出し元とテストケースくらいは出しましょう

[Chandler_Bing]

承知致致しました。

Answer 1

メアドのバリデートはほとんど意味がないので最低限のもので十分です。

• @が1個入っている
• @の前に1文字以上の文字、@の後ろに「.」を1個以上含む文字

くらいが妥当でしょう

Answer 2

value.match('/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/')

この正規表現を言葉で説明すると、「文字列の先頭(^)の前にスラッシュがあり、…文字列の末尾($)の後にスラッシュがある」となります。

引用符を消して正規表現リテラルにするか、/ を消してください。

value.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)

value.match('^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$')

---

参考までに、#email-address が <input type=email> の場合、$('#email-address')[0].validity.typeMismatch でフォーマットのチェックが可能で、$('#email-address')[0].validationMessage でブラウザが用意したエラーメッセージが取得可能です(Chrome だとかなり細かい)。

Comments

[Chandler_Bing]

なるほど。。ありがとうございます。