メールアドレスの形式かを検証したい | 正規表現

このプログラムでは、JavaScriptの正規表現を使用して、文字列が有効なメールアドレス形式であるかどうかを確認します。

INDEX

メールアドレス検証プログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
RegExpオブジェクトメソッドの機能一覧

メールアドレス検証プログラム

以下のコードでは、正しいメールアドレス形式と間違ったメールアドレス形式をそれぞれ検証しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メールアドレスの形式を検証する方法</title>
    <script>
        window.onload = function() {
            // メールアドレスの形式を検証する関数
            function validateEmail(email) {
                const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return emailPattern.test(email); // 正規表現でメールアドレス形式を検証
            }

            // テスト用のメールアドレス
            const validEmail = "test@example.com";
            const invalidEmail = "invalid-email.com";

            // メールアドレスの形式を検証
            const validResult = validateEmail(validEmail);
            const invalidResult = validateEmail(invalidEmail);

            // 結果をHTMLに表示
            document.getElementById('validEmailCheck').textContent = `「${validEmail}」は正しいメールアドレス形式か: ${validResult}`;
            document.getElementById('invalidEmailCheck').textContent = `「${invalidEmail}」は正しいメールアドレス形式か: ${invalidResult}`;
        }
    </script>
</head>
<body>

    <h1>メールアドレスの形式を検証する方法</h1>

    <div id="validEmailCheck"></div>
    <div id="invalidEmailCheck"></div>

</body>
</html>

プログラムの解説

このプログラムでは、正規表現を使用してメールアドレス形式が正しいかどうかを検証しています。test()メソッドを使って、指定されたメールアドレスが正規表現にマッチするかを判定しています。

以下は正規表現およびtest()メソッドに関する注意点です。

正規表現では、^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$の形式でメールアドレスを検証しています。
このパターンは、一般的なメールアドレス形式をカバーしますが、すべての有効なメールアドレスを保証するわけではないため、実際の運用では外部ライブラリやバックエンドでのバリデーションも検討してください。
特殊文字（例: .や@）はエスケープする必要があるため、正規表現で\.や@のように扱います。