如何在 JavaScript 中進行電子郵件驗證？ [舉例]
已發表: 2021-02-23JavaScript 是一種旨在創建應用程序的編程語言。 它比其他語言快得多，因為它非常輕巧且易於使用。 它用於創建設計良好的應用程序。
JavaScript 中的電子郵件驗證對於創建 Web 應用程序的用戶體驗很重要。 驗證有助於將有效信息從 Web 應用程序的客戶端傳遞到服務器。
目錄
什麼是驗證？
驗證是指檢查用戶輸入的值的過程。 它在創建應用程序和增強用戶體驗方面起著至關重要的作用。 許多字段，例如手機號碼、電子郵件、日期和密碼，都通過此過程進行驗證。
JavaScript 使驗證過程更快，因為它比其他服務器端驗證更快地處理數據。 現在讓我們看一下JavaScript 中電子郵件驗證的實現。
JavaScript 中的電子郵件驗證
電子郵件驗證是驗證 HTML 表單的重要部分之一。 電子郵件是 ASCII 字符的子集或字符串，使用 @ 符號分為兩部分。 它的第一部分包含私人信息，第二部分包含註冊電子郵件的域名。
以下是第一部分的 ASCII 字符：
- # * + & ' 等特殊字符！ %@？ {^}”
- 數字字符（0 到 9）
- 句號、點等，條件是它不能是電子郵件的最後一個字母或第一個字母，並且不能一個接一個地重複。
- 大寫字母（A 到 Z）和小寫字母（a 到 z）
第二部分包括以下內容：
- 點
- 數字
- 連字符
- 信件
使用正則表達式是JavaScript 中電子郵件驗證的最佳方式之一。 它利用正則表達式來定義字符的模式。
一些有效電子郵件 ID 的示例：
- 自己的[email protected]
- 網站所有者@up.down.net
- [email protected]
無效電子郵件 ID 的其他一些示例
- [email protected]（不允許一個接一個的點）
- Inownzsite()&@abcd.com（正則表達式中只允許使用字符、破折號、下劃線和數字。）
- Ourwebsiteismne.azbyz.com（這裡沒有@符號）
- [email protected]（這裡頂級域名不能以點開頭）
- @youmenandwe.we.net（這裡不能以@符號開頭）
- [email protected]（“.b”不是有效的頂級域）email.js
該文件包含電子郵件驗證所需的 JavaScript 代碼。 在這裡，正則表達式用於在應用程序的客戶端驗證電子郵件。
JavaScript 代碼中有效電子郵件驗證的檢查點：
- 描述一個正則表達式來驗證一個電子郵件地址
- 如果輸入值與正則表達式匹配
- 如果匹配，則發送“電子郵件地址有效”的警報。
- 如果不匹配，請發送警報“電子郵件地址無效”。
相關： Javascript中的密碼驗證
JavaScript 中的電子郵件驗證代碼
下面給出的是 JavaScript 中的電子郵件驗證代碼。 此代碼可以驗證用戶創建或輸入的電子郵件是否有效。 將文件另存為 filename.js。
//代碼片段
函數電子郵件驗證（輸入電子郵件）
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert(“是的！一封有效的電子郵件！”);
document.form1.text1.focus();
返回真；
}
別的
{
alert(“對不起！一封無效的電子郵件！”);
document.form1.text1.focus();
返回假；
}
}
JavaScript 函數在 HTML 表單中使用如下。 將文件另存為 filename.html：
<!DOCTYPE html>
<html lang=”en”>
<頭部>
<元字符集=”utf-8″>
<title>JavaScript 中的電子郵件驗證</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div 類=“郵件”>
<h2>輸入驗證郵箱</h2>
<form name=”form1″ action=”#”>
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</form>
</div>
<script src=”filename.js”></script>
</正文>
</html>
以下代碼可以使用 CSS 向表單添加樣式。 將文件另存為 filename.css。
li {列表樣式類型：無；
字體大小：16pt；
}
。郵件 {
邊距：自動；
填充頂部：20px；
底部填充：20px；
寬度：850 像素；
背景：RGB（150、195、208）；
邊框：1px 臟 rgb(1, 20, 24);
}
.mail h2 {
左邊距：36px；
}
輸入 {
字體大小：28pt；
}
輸入：焦點，文本區域：焦點{
背景顏色：白色；
}
輸入提交{
字體大小：18pt；
}
現在您可以執行 HTML 代碼並在 JavaScript 中完成電子郵件驗證。
閱讀： GitHub 中的 Javascript 項目
從世界頂級大學在線學習軟件課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。
結論
電子郵件驗證對於避免製作無效的電子郵件地址非常重要。 在本文中，通過代碼解釋了驗證電子郵件ID是否有效，並讓系統檢查並通知用戶輸入的電子郵件ID是否無效。
如果您有興趣了解有關全棧開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和任務, IIIT-B 校友身份，實用的實踐頂點項目和頂級公司的工作協助。
