任何人在輸入字段中輸入電子郵件時都可能會犯錯誤。因此，開發(fā)人員有責(zé)任檢查用戶是否輸入了有效的電子郵件字符串。許多庫可用于驗證電子郵件地址，我們可以將其與各種 JavaScript 框架一起使用，但不能與普通 JavaScript 一起使用。然而，如果我們想使用任何庫，我們就需要使用它的 CDN。
在這里，我們將使用正則表達式在普通 JavaScript 中驗證電子郵件地址。
示例 1 中使用的正則表達式
我們在示例 1 中使用了以下正則表達式模式來驗證電子郵件。
let regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
登錄后復(fù)制
用戶可以按照下面對上述正則表達式的解釋進行操作。
^ – 它是字符串的開頭。
[a-z0-9]+ – 字符串開頭的 a 到 z 和 0 到 9 之間的任何字符。
@ – 字符串應(yīng)在一些字母數(shù)字字符后包含“@”字符。
[a-z]+ – 字符串中“@”字符之后的 a 到 z 之間至少有一個字符。
\. – 電子郵件應(yīng)包含點，后跟一些字符，后跟“@”字符
[a-z]{2,3}$ – 它應(yīng)該在字符串末尾包含兩個或三個字母字符。 ‘$’代表字符串的結(jié)尾。
示例 1
在下面的示例中，當(dāng)用戶單擊按鈕時，它將調(diào)用 validateEmail() 函數(shù)。在 validateEmail() 函數(shù)中，我們使用 JavaScript 的 Prompt () 方法獲取用戶的電子郵件輸入。
之后，我們按照上述語法中的說明創(chuàng)建了正則表達式。我們使用正則表達式通過 test() 方法測試用戶的電子郵件輸入，該方法根據(jù)電子郵件是否與正則表達式匹配返回布爾值。
<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>
登錄后復(fù)制
示例 2 中使用的正則表達式
我們在示例 2 中使用了以下正則表達式模式來驗證電子郵件。
let regex = new RegExp(/\S+@\S+\.\S+/);
登錄后復(fù)制
用戶可以按照下面對上述正則表達式的解釋進行操作。
\S+ – 它代表任何字母數(shù)字單詞。
\. – 代表點字符。
基本上，上述模式與 word@word.word 類型的電子郵件地址匹配。
示例 2
在下面的示例中，我們使用 HTML 創(chuàng)建了電子郵件輸入。用戶可以在輸入字段中輸入任何電子郵件。在輸入中輸入電子郵件后，用戶需要單擊“驗證輸入電子郵件”按鈕，這將調(diào)用submitEmail()函數(shù)。
在submitEmail()函數(shù)中，我們使用上面的正則表達式和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>
登錄后復(fù)制
我們學(xué)會了使用正則表達式驗證電子郵件字符串。我們已經(jīng)看到了兩個正則表達式并進行了解釋，以便初學(xué)者可以了解如何為電子郵件創(chuàng)建正則表達式。
此外，開發(fā)人員可以根據(jù)自己的需要創(chuàng)建自定義正則表達式來驗證電子郵件地址。
以上就是如何在 JavaScript 中使用 RegExp 驗證電子郵件地址？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
