JavaScriptでEメール検証を行う方法は？【例あり】

公開: 2021-02-23

JavaScriptは、アプリケーションを作成するために設計されたプログラミング言語です。非常に軽量で使いやすいため、他の言語よりもはるかに高速です。これは、適切に設計されたアプリケーションを作成するために使用されます。

JavaScriptでの電子メール検証は、 Webアプリケーションを作成するユーザーエクスペリエンスにとって重要です。 検証は、Webアプリケーションのクライアントからサーバーに有効な情報を渡すのに役立ちます。

検証とは何ですか？

検証とは、ユーザーが入力した値を調べるプロセスを指します。これは、アプリケーションの作成において重要な役割を果たし、ユーザーエクスペリエンスを向上させます。携帯電話番号、電子メール、日付、パスワードなどの多くのフィールドは、このプロセスを通じて検証されます。

JavaScriptは、他のサーバー側の検証よりもデータの処理が高速であるため、検証プロセスを高速化します。それでは、JavaScriptでのメール検証の実装を見てみましょう。

JavaScriptでのメール検証

電子メールの検証は、HTMLフォームを認証するための重要な部分の1つです。電子メールは、ASCII文字のサブセットまたは文字列であり、@記号を使用して2つの部分に分割されます。最初の部分は個人情報で構成され、2番目の部分には電子メールが登録されるドメイン名が含まれています。

最初の部分のASCII文字は次のとおりです。

＃* +＆'などの特殊文字！％@？ {^}」
数字（0から9）
ピリオド、ドットなど、メールの最後または最初の文字にすることはできず、次々に繰り返すことはできないという条件があります。
大文字のアルファベット（AからZ）と小文字のアルファベット（aからz）

2番目の部分には次のものが含まれます。

ドット
数字
ハイフン
手紙

正規表現を使用することは、JavaScriptでの電子メール検証の最良の方法の1つです。 正規表現を使用して、キャラクターのパターンを定義します。

有効な電子メールIDの例のいくつか：

無効な電子メールIDの他の例

Owner.me..7080 @ abcd.com（別のドットに1つは許可されていません）
Inownzsite（）＆@ abcd.com（正規表現では、文字、ダッシュ、アンダースコア、および数字のみが許可されます。）
Ourwebsiteismne.azbyz.com（ここでは@記号はありません）
[email protected]（ここではトップレベルドメインをドットで始めることはできません）
@ youmenandwe.we.net（ここでは@記号で始めることはできません）
[email protected]（「。b」は有効なトップレベルドメインではありません）email.js

このファイルは、電子メールの検証に必要なJavaScriptコードで構成されています。ここでは、正規表現を使用して、アプリケーションのクライアント側で電子メールを検証します。

JavaScriptコードでの効率的なメール検証のチェックポイント：

メールアドレスを検証するための正規表現を説明する
入力値が正規表現と一致する場合
一致する場合は、「メールアドレスが有効です」というアラートを送信します。
一致しない場合は、「メールアドレスが無効です」というアラートを送信してください。

関連： Javascriptでのパスワード検証

JavaScriptのEメール検証コード

以下に、JavaScriptの電子メール検証コードを示します。このコードは、ユーザーが作成または入力した電子メールが有効かどうかを検証できます。ファイルをfilename.jsとして保存します。

//コードスニペット

関数EmailValidation（enteredEmail）

{{

var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

if（enteredEmail.value.match（enteredEmail））

{{

alert（“うん！有効なメール！”）;

document.form1.text1.focus（）;

trueを返します。

}

そうしないと

{{

alert（「申し訳ありません！無効なメールです！」）;

document.form1.text1.focus（）;

falseを返します。

}

JavaScript関数は以下のようにHTML形式で使用されます。ファイルをfilename.htmlとして保存します。

<！DOCTYPE html>

<頭>

<title>JavaScriptでのメール検証</title>

</ head>

<h2>検証用のメールアドレスを入力してください</h2>

<ul>

</ ul>

</ form>

</ div>

</ body>

</ html>

次のコードは、CSSを使用してフォームにスタイルを追加できます。ファイルをfilename.cssとして保存します。

li {list-style-type：none;

フォントサイズ：16pt;

}

。郵便物 {

マージン：自動;

パディングトップ：20px;

パディング-下：20px;

幅：850px;

背景：rgb（150、195、208）;

ボーダー：1px汚れたrgb（1、20、24）;

}

.mail h2 {

マージン左：36px;

}

入力{

フォントサイズ：28pt;

}

input：focus、textarea：focus {

背景色：白;

}

入力送信{

フォントサイズ：18pt;

}

これで、HTMLコードを実行し、JavaScriptでの電子メール検証を実行できます。

読む： GitHubのJavascriptプロジェクト

世界のトップ大学からオンラインでソフトウェアコースを学びましょう。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。

結論

電子メールの検証は、無効な電子メールアドレスを作成しないようにするために非常に重要です。この記事では、コードを使用して、電子メールIDが有効かどうかを検証し、入力された電子メールIDが無効かどうかをシステムがチェックしてユーザーに通知するように説明します。

フルスタック開発の詳細に興味がある場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のエグゼクティブPGプログラムをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクト、および割り当てを提供します。、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との雇用支援。

あなたの夢の仕事に着陸

フルスタック開発のエグゼクティブPGプログラムに今すぐ申し込む

JavaScriptでEメール検証を行う方法は？ 【例あり】