如何在 JavaScript 中驗證電子郵件地址？

在本教程中，我們將學習如何使用 JavaScript 驗證電子郵件地址。

計算機網路的電子郵箱，通常稱為電子郵件地址，用於傳送和接收郵件。所有電子郵件地址都具有與 20 世紀 80 年代相同的格式。

電子郵件驗證過程檢查電子郵件地址是否可傳遞且合法。它快速執行一種演算法，檢測不同的拼寫錯誤，以及是否存在故意的誤導或無意的錯誤。它驗證諸如 Gmail 或 Yahoo 之類的服務，以確定某個電子郵件地址是否在這些信譽良好的域名中註冊。這提高了電子郵件程式的有效性，並有助於整理和清理電子郵件地址列表，並保護您的電子郵件傳送者評分。

以下是使用 JavaScript 驗證電子郵件地址的方法。

使用正則表示式方法

也稱為理性表示式，它定義了一種搜尋模式，正則表示式由字串字元組成。它通常用於“查詢和替換”之類的操作，同時比較字串中的模式。使用正則表示式是匹配字元序列模式的更廣泛的方法。

個人資訊部分包含以下 ASCII 字元：

  • 大寫字母 (A-Z) 和小寫字母 (a-z)。
  • 所有 (0-9) 數字字元。
  • 特殊字元，如;! - / = ? # $ % & ' * + ^ _ ` { | } ~,
  • 句點、點或句號 (.)

所有這些都必須滿足以下條件：不能是電子郵件的第一個或最後一個字母，並且不能連續重複。

語法

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
   return true;
}
else
{
   return false;
}

變數 mailformat 將獲取正則表示式並檢查輸入是否與以下格式匹配。如果匹配，則電子郵件有效；否則無效。

示例

在此示例中，建立一個表單，使用者在表單的輸入部分輸入要檢查的電子郵件地址。輸入的電子郵件地址透過正則表示式進行檢查。正則表示式將檢查電子郵件地址是否與電子郵件地址的常用格式匹配。透過這種方式，電子郵件地址被視為有效或無效。

<html>
<head>
   <style>
      li {list-style-type: none;
         font-size: 16pt;
      }
      .mail {
         margin: auto;
         padding-top: 10px;
         padding-bottom: 10px;
         width: 400px;
         background : #D8F1F8;
         border: 1px solid silver;
      }
      .mail h2 {
         margin-left: 38px;
      }
      input {
         font-size: 20pt;
      }
      input:focus, textarea:focus{
         background-color: lightyellow;
      }
      input submit {
         font-size: 12pt;
      }
      .rq {
         color: #FF0000;
         font-size: 10pt;
      }
   </style>
</head>
<body onload='document.form1.text1.focus()'>
   <h2>Validate email address using <i>Regular Expression</i></h2>
   <div class = "mail">
      <h3>Input an email and Submit</h3>
      <form name = "form1" action = "#">
         <ul>
            <li><input type = 'text' name = 'text1'/></li>
            <li></li>
            <li class="submit"><input type = "submit" name = "submit" value = "Submit" onclick = "ValidateEmail(document.form1.text1)"/> </li>
            <li></li>
         </ul>
      </form>
   </div>
   <script>
      function ValidateEmail(inputText)
      {
         var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
         if(inputText.value.match(mailformat))
         {
            document.write("Valid email address!");
            document.form1.text1.focus();
            return true;
         }
         else
         {
            document.write("You have entered an invalid email address!");
            document.form1.text1.focus();
            return false;
         }
      }
   </script>
</body>
</html>

索引值計算方法

lastIndexOf() 函式返回字串中給定值最後出現的位置（位置）的索引。從頭到尾搜尋字串。它從零開始返回索引（位置 0）。如果無法檢索該值，則返回 -1。使用 lastIndexOf() 函式時，大小寫敏感。

indexOf() 函式返回字串中值的第一次出現的位置。如果此過程無法檢索該值，則返回 -1。indexOf() 函式的大小寫敏感性。

在 JavaScript 中，驗證“@”和“.”條件以驗證電子郵件地址。

語法

atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
   return false;
}

return true;獲取“@”的第一次出現，並獲取“.”的最後一次出現以檢查電子郵件地址的有效性。

示例

在此示例中，使用者在程式碼中輸入電子郵件地址。為了驗證電子郵件地址的有效性，收集“@”的第一次出現和“.”的最後一次出現。indexOf 使用此 () 和 lastIndexOf() 方法在 JavaScript 中。如果格式與電子郵件 ID 匹配，則它無效。

<html>
<body>
   <h2>Validate email address using <i>index values</i></h2>
   <p id = "root"></p>
   <script>
      let root = document.getElementById("root");
      var emailID;
      function validateEmail(emailID) {
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            document.write("Please enter correct email ID");
            document.myForm.EMail.focus() ;
            return false;
         }
         document.write("Valid email ID!");
         document.write("<br>");
         return true;
      }
      document.write("Email ID entered: abc@gmail.com");
      document.write("<br>");
      document.write(validateEmail("abc@gmail.com"));
      document.write("<br>");
      document.write("Email ID entered: abc.gmail*com");
      document.write("<br>");
      document.write(validateEmail("abc.gmail*com"));
   </script>
</body>
</html>

在本教程中，我們遇到了兩種驗證電子郵件地址的方法。第一種方法是使用正則表示式。第二種方法是查詢用於驗證的電子郵件地址中特殊字元的索引值。

更新於： 2022-10-31

20K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.