如何在 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: [email protected]");
      document.write("<br>");
      document.write(validateEmail("[email protected]"));
      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+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告