任何人在輸入欄位中輸入電子郵件時都可能會犯錯。因此，開發人員有責任檢查使用者是否輸入了有效的電子郵件字串。許多程式庫可用於驗證電子郵件地址，我們可以將其與各種 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中文網其他相關文章！
