如何使用 JavaScript 验证电子邮件-之路教程

什么是电子邮件？

电子邮件是由 3 部分组成的字符串：用户名、@ 符号和域。
电子邮件地址的第一部分是用户名。
@ 符号位于用户名和电子邮件地址域之间。

域由两部分组成：邮件服务器和顶级域。
邮件服务器是托管电子邮件帐户（“Gmail”）的服务器。
顶级域是扩展名，例如 .com、.net 或者 .info。

如何使用 JavaScript 验证电子邮件

验证电子邮件非常困难，但却是可能的。
在本教程中，我们将展示如何使用 JavaScript 验证电子邮件。

要获得有效的电子邮件 ID，最好的方法是使用正则表达式：

function validateEmail(email) {
  const res = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return res.test(String(email).toLowerCase());
}

但是，我们不仅应该信任 JavaScript 电子邮件验证，还应该在服务器端对其进行验证。

这是上面的脚本：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <form>
      <p>Enter an email address:</p>
      <input id='email'>
      <button type='submit' id='validate'>Validate button</button>
    </form>
    <div id='result'></div>
    <script>
      function validateEmail(email) {
        let res = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return res.test(email);
      }
      function validate() {
        let result = $("#result");
        let email = $("#email").val();
        result.text("");
        if(validateEmail(email)) {
          result.text(email + " is valid");
          result.css("color", "blue");
        } else {
          result.text(email + " is not valid");
          result.css("color", "red");
        }
        return false;
      }
      $("#validate").on("click", validate);
    </script>
  </body>
</html>

如果我们输入了一个有效的电子邮件地址，点击“验证”按钮，结果将是蓝色的，如果我们输入一个无效的电子邮件地址，那么结果将是红色。

日期：2020-06-02 22:16:27 来源：oir作者：oir

←如何在自定义数据属性上使用 jQuery 选择器

如何在 JavaScript 中编写一个接受任意数量参数的函数→

什么是电子邮件？

目录