資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在JavaScript中使用正則表示式驗證郵箱地址？
任何人在輸入欄位中輸入電子郵件時都可能出錯。因此，檢查使用者是否輸入了有效的電子郵件字串是開發人員的責任。許多庫可用於驗證電子郵件地址，我們可以將它們與各種 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>
我們學習瞭如何使用正則表示式驗證電子郵件字串。我們已經看到了兩個正則表示式，並對其進行了解釋，以便初學者可以理解如何為電子郵件建立正則表示式。
此外，開發人員可以根據自己的需要建立自定義正則表示式來驗證電子郵件地址。
13K+ 次瀏覽
