【バリデーション】メールアドレス｜フォームの入力形式チェックを実装する方法

RELEASE / 2023.10.25 UPDATE / 2023.11.16

JavaScript

jQuery

バリデーション

フォーム

メールアドレスチェック

入力形式チェック

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

ウェブ上での情報交換の中心として、メールアドレスは不可欠です。特に自動返信メールなどのシステムが活用されている場面では、間違ったアドレスが入力されると正常な通知が行えません。これを防ぐため、フォームで収集する際に正確なメールアドレスを確保することが求められます。この記事では、JavaScriptとjQueryを使用して、メールアドレスの形式をチェックする方法を詳しく解説します。

この記事の目次を表示

1 メールアドレスの形式チェック
- 1.1 JavaScriptで実装する方法
- 1.2 jQueryで実装する方法
2 その他のバリデーションチェック
3 まとめ

メールアドレスの形式チェック

まず初めに、HTMLのコードを用意します。今回の入力形式チェックに使用するHTMLは全て以下の通りです。

HTML

<form id="myForm">
    <input type="text" id="myInput" required>
    <button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>

JavaScript、jQueryそれぞれの実装方法を解説していきます。

JavaScriptで実装する方法

メールアドレスの入力形式チェックをJavaScriptで実装する方法は以下になります。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var email = document.getElementById('myInput').value;
    var regex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,}$/;

    if (regex.test(email)) {
        document.getElementById('errorMessage').textContent = '';
        this.submit();
    } else {
        document.getElementById('errorMessage').textContent = '正しいメールアドレスの形式を入力してください。';
    }
});

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

まず、myFormというIDを持つフォームのsubmitイベントへリスナーを追加しましょう。これにより、ユーザがフォームを送信しようとする際の動作をキャッチできます。

リスナーが発火したら、event.preventDefault()を利用して、一時的に送信を中断します。これで、形式の確認前に送信を防ぐことができます。

送信を中断したら、次にdocument.getElementByIdメソッドやquerySelectorメソッドを使用して、myInputの入力値を取得します。

入力値を取得したら、基本的なメールアドレスの正規表現を適用し、形式を確認します。

最後に、形式が正しければ、フォームを送信します。そうでなければ、エラーメッセージを表示してユーザに知らせます。

jQueryで実装する方法

メールアドレスの入力形式チェックをjQueryで実装する方法は以下になります。

$('#myForm').on('submit', function(event) {
    event.preventDefault();

    var email = $('#myInput').val();
    var regex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,}$/;

    if (regex.test(email)) {
        $('#errorMessage').text('');
        this.submit();
    } else {
        $('#errorMessage').text('正しいメールアドレスの形式を入力してください。');
    }
});