例: JavaScript (正規表現) を使用したメール検証

多くの場合、フォームの特定のフィールドに電子メール アドレスが入力されていることを検証する必要があります。 有効なメール. この記事では、JavaScript で正規表現 (regex とも呼ばれます) を使用してメールを検証する方法を学習します。

正規表現 (regex) とは何ですか?

正規表現は、検索パターンを定義する一連の文字です。 この場合、有効な電子メール アドレスを表すパターンを見つけたいと考えています。

正規表現は、テキスト文字列を操作し、入力データを検証するための強力で柔軟なツールです。

正規表現によるメール検証

電子メールが有効であることを検証するには、形式が正しいこと、つまり、@ とドメインが含まれていることを確認する必要があります。 これには、次の式を使用します。

変数 正規表現 = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

完全なフォームの例

次の例では、JavaScript と正規表現を使用して電子メール アドレスを検証する方法を示します。 私たちが従う手順は次のとおりです。

1. と呼ばれる関数を定義します。 検証メール これは、検証する電子メールを引数として受け取ります。
2. 変数を作成します 正規表現 メールを検証するための正規表現を含む です。
3. メソッドを使用します テスト（） 入力された電子メールがパターンに一致するかどうかを確認するための正規表現の。
4. 電子メールが有効な場合、有効であることを示す警告メッセージが表示されます。 それ以外の場合は、無効であることを示す警告メッセージが表示されます。
5. HTML では、「email」タイプの入力フィールドと、クリックすると関数を呼び出すボタンを作成します。 検証メール 入力フィールドに入力された値で。

function validateEmail (mail) {
// メールを検証する正規表現
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// メールが正規表現で定義されたパターンに一致するかどうかを確認します

if (regex.test (mail)) {
alert("Valid email");
} else {
alert ("無効な電子メール");
}
}

JavaScript と正規表現によるメール検証

検証

JavaScript による検証の利点と欠点

クライアント側で JavaScript を使用して電子メール アドレスなどの入力データを検証することには、次のような利点と欠点があります。

利点	短所
ユーザーへの即時フィードバック	安全ではない
サーバーの負荷が少ない	クロス ブラウザの互換性
ユーザー エクスペリエンスの向上	労力の重複 (クライアント/サーバー側)
応答時間の短縮	サーバー側の検証を置き換えません

JavaScript を使用したデータの検証は、サーバー側の検証に代わるものではありません。 ただし、負荷を軽減するのに役立ちます。 サーバー側でデータを検証するには、次を読むことをお勧めします。

• PHP によるメール検証