【初心者向け】JavaScript（jQuery)でメールアドレスの入力チェックを行う

概要

問い合わせフォームなどで入力されたメールアドレスの値チェックを
JavaScript(jQuery)で行う方法を紹介します。

コード

HTML サンプル

<form action="" method="post">
    <input type="text" name="name" required>
    <input id="email" type="email" name="email" required>
    <textarea name="message" required></textarea>
    <input type="submit" value="送信" id="submitBtn">
</form>

JavaScript サンプル

$("form").on({
    "submit":function(e){
        var mail = $("#email").val();

        if(!mail.match(/.+@.+\..+/)){
            alert("メールアドレスを入力してください");
            return false;
        }else{
            return true;
        }      
    }
});

解説

submit（送信）時、入力値がメールアドレスかどうかを判定し処理の実行制御します。

フォームに対しJavaScriptでイベントハンドラを登録します。
以下のように記載することで、formに対してsubmitイベントが発動した時の処理を登録します。

$("form").on({
    "submit":function(e){
        //ここに処理を追加
    }
});

フォームに入力された値を取得します。HTMLサンプルコードにて
メールアドレス入力箇所に id=”email” が設定されているため以下のようにval()で値取得します。

var mail = $("#email").val();

続いて、「submitが発動した時どのようなチェックを行うか」を記載します。
正規表現でメールアドレスの入力チェックを行います。

if(!mail.match(/.+@.+\..+/)){
　　　　alert("メールアドレスを入力してください");
       return false;
}else{
       return true;
}      

※上記の条件だと「任意の文字1文字以上」 &「@」&「任意の文字1文字以上」&「.」&「任意の文字1文字以上」になります。

return false; を記述し、submit処理を中止させます。

問い合わせフォームでメールアドレス入力欄にテキトーな文字を入力されて送信されたら困る！
という方は是非実装してみてください！