如何在 JavaScript 中使用 RegExp 驗證電子郵件地址？
任何人在輸入欄位中輸入電子郵件時都可能會犯錯。因此，開發人員有責任檢查使用者是否輸入了有效的電子郵件字串。許多程式庫可用於驗證電子郵件地址，我們可以將其與各種 JavaScript 框架一起使用，但不能與普通 JavaScript 一起使用。然而，如果我們想使用任何函式庫，我們就需要使用它的 CDN。
在這裡，我們將使用正規表示式在普通 JavaScript 中驗證電子郵件地址。
範例 1 中使用的正規表示式
我們在範例 1 中使用了以下正規表示式模式來驗證電子郵件。
let regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
使用者可以按照下面對上述正規表示式的解釋進行操作。
^ - 它是字串的開頭。
[a-z0-9] - 字串開頭的 a 到 z 和 0 到 9 之間的任何字元。
@ - 字串應在一些字母數字字元後包含「@」字元。
[a-z] - 字串中「@」字元之後的 a 到 z 之間至少有一個字元。
\. – 電子郵件應包含點，後面跟著一些字符，後面跟著一些字符，後面跟著“@”字符
[a-z]{2,3}$ - 它應該在字串末尾包含兩個或三個字母字元。 ‘$’代表字串的結尾。
範例 1
在下面的範例中，當使用者點擊按鈕時，它將呼叫 validateEmail() 函數。在 validateEmail() 函數中，我們使用 JavaScript 的 Prompt () 方法來取得使用者的電子郵件輸入。
之後，我們依照上述語法中的說明建立了正規表示式。我們使用正規表示式透過 test() 方法測試使用者的電子郵件輸入，該方法根據電子郵件是否與正規表示式匹配傳回布林值。
<html>
<body>
<h3>Using the <i> Regular expression </i> to validate email in JavaScript </h3>
<div id = "output"> </div>
<button onclick = "validateEmail()"> Validate any email </button>
<script>
var output = document.getElementById('output');
function validateEmail() {
let userEmail = prompt("Enter your email.", "you@gmail.com");
let regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
let result = regex.test(userEmail);
if (result) {
output.innerHTML = "The " + userEmail + " is a valid email address!";
} else {
output.innerHTML = "The " + userEmail + " is not a valid email address!";
}
}
</script>
</body>
</html>
範例 2 中使用的正規表示式
我們在範例 2 中使用了以下正規表示式模式來驗證電子郵件。
let regex = new RegExp(/\S+@\S+\.\S+/);
使用者可以按照下面對上述正規表示式的解釋進行操作。
\S - 它代表任何字母數字單字。
\. – 代表點字元。
基本上，上述模式與 word@word.word 類型的電子郵件地址相符。
範例 2
在下面的範例中，我們使用 HTML 建立了電子郵件輸入。使用者可以在輸入欄位中輸入任何電子郵件。在輸入中輸入電子郵件後，使用者需要按一下「驗證輸入電子郵件」按鈕，這將呼叫submitEmail()函數。
在submitEmail()函數中，我們使用上面的正規表示式和test()方法來檢查使用者輸入的電子郵件字串。
在輸出中，使用者可以輸入各種電子郵件並觀察輸出。
<html>
<head>
<style>
div {
font-size: 1rem;
color: red;
margin: 0.1rem 1rem;
}
</style>
</head>
<body>
<h2>Using the <i> Regular expression </i> to validate email in JavaScript </h2>
<div id = "output"> </div>
<input type = "email" id = "emailInput" placeholder = "abc@gmail.com">
<br><br>
<button onclick = "submitEmail()"> Validate input email </button>
<script>
var output = document.getElementById('output');
function submitEmail() {
let userEmail = document.getElementById('emailInput').value;
let regex = new RegExp(/\S+@\S+\.\S+/);
let isValid = regex.test(userEmail);
if (isValid) {
output.innerHTML = "The " + userEmail + " is a valid email address!";
} else {
output.innerHTML = "The " + userEmail + " is not a valid email address!";
}
}
</script>
</body>
</html>
我們學會了使用正規表示式驗證電子郵件字串。我們已經看到了兩個正規表示式並進行了解釋，以便初學者可以了解如何為電子郵件建立正規表示式。
此外，開發人員可以根據自己的需求建立自訂正規表示式來驗證電子郵件地址。
以上是如何在 JavaScript 中使用 RegExp 驗證電子郵件地址？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
在JavaScript中替換字符串字符
Mar 11, 2025 am 12:07 AM
JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi
jQuery檢查日期是否有效
Mar 01, 2025 am 08:51 AM
簡單JavaScript函數用於檢查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //測試 var
jQuery獲取元素填充/保證金
Mar 01, 2025 am 08:53 AM
本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值，特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距，但獲取準確的值可能會比較棘手。 // 設定 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能會認為這段代碼很
10個jQuery手風琴選項卡
Mar 01, 2025 am 01:34 AM
本文探討了十個特殊的jQuery選項卡和手風琴。 選項卡和手風琴之間的關鍵區別在於其內容面板的顯示和隱藏方式。讓我們深入研究這十個示例。 相關文章：10個jQuery選項卡插件
10值得檢查jQuery插件
Mar 01, 2025 am 01:29 AM
發現十個傑出的jQuery插件，以提升您的網站的活力和視覺吸引力！這個精選的收藏品提供了不同的功能，從圖像動畫到交互式畫廊。讓我們探索這些強大的工具：相關文章：1
HTTP與節點和HTTP-Console調試
Mar 01, 2025 am 01:37 AM
HTTP-Console是一個節點模塊，可為您提供用於執行HTTP命令的命令行接口。不管您是否針對Web服務器，Web Serv
自定義Google搜索API設置教程
Mar 04, 2025 am 01:06 AM
本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中，提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單！您將能夠將搜索限制為Y
jQuery添加捲軸到Div
Mar 01, 2025 am 01:30 AM
當div內容超出容器元素區域時，以下jQuery代碼片段可用於添加滾動條。 (無演示，請直接複製到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c
