验证 email 地址，是开发的日常需求。JavaScript 提供了一种简单而有效的方法来验证电子邮件地址。本文将介绍如何在 JavaScript 中验证电子邮件地址。

首先，让我们了解一下电子邮件地址的结构。电子邮件地址由三个部分组成：用户名、@符号、域名。用户名通常由字母、数字和特殊字符组成。域名通常由主机名和顶级域名组成，例如 gmail.com 或 yahoo.com。

现在让我们来看看如何验证电子邮件地址。以下是一些步骤：

1、创建一个正则表达式

我们可以使用正则表达式来验证电子邮件地址。正则表达式是一种模式匹配工具，用于在文本中查找特定的模式。在这种情况下，我们将使用正则表达式来查找电子邮件地址的模式。以下是一个简单的正则表达式来验证电子邮件地址：

var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

2、使用正则表达式验证电子邮件地址

一旦我们创建了正则表达式，我们可以使用它来验证电子邮件地址。以下是一个简单的 JavaScript 函数，用于验证电子邮件地址：

function isValidEmail(email) {
  return emailRegex.test(email);
}

该函数接受一个电子邮件地址作为参数，并使用正则表达式来验证它。如果电子邮件地址有效，则函数将返回 true；否则，它将返回 false。

现在，我们已经完成了如何在 JavaScript 中验证电子邮件地址的介绍。希望这个简短的教程能够帮助您了解如何验证电子邮件地址。

3、添加更多的验证规则

除了上述的正则表达式之外，我们还可以添加更多的验证规则来增强电子邮件地址的验证。例如，我们可以检查电子邮件地址是否包含“@”符号，是否包含至少一个字符，是否包含至少一个点号等等。以下是一个修改后的 JavaScript 函数，它包含更多的验证规则：

function isValidEmail(email) {
  var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  if (!email) {
    return false;
  }

  if (!emailRegex.test(email)) {
    return false;
  }

  var atIndex = email.indexOf("@");
  if (atIndex < 1 || atIndex === email.length - 1) {
    return false;
  }

  var domain = email.substring(atIndex + 1);
  if (domain.indexOf(".") === -1) {
    return false;
  }

  return true;
}

这个函数先检查传递的电子邮件地址是否为空，如果为空则返回 false。然后，它使用正则表达式来验证电子邮件地址的基本格式。接下来，它检查电子邮件地址中是否包含“@”符号，以及“@”符号是否出现在第一个字符之后和最后一个字符之前。最后，它检查电子邮件地址中是否包含至少一个点号。如果所有的验证规则都通过了，则函数将返回 true；否则，它将返回 false。

4、使用现有的 JavaScript 库

除了自己编写验证函数之外，还可以使用现有的 JavaScript 库来验证电子邮件地址。这些库包含了许多强大的功能，例如自定义错误消息、本地化支持、邮件服务器验证等等。以下是一些流行的 JavaScript 库：

jQuery Validation Plugin：这是一个流行的 jQuery 插件，用于验证表单输入。它包含了许多内置的验证规则，例如电子邮件地址、URL、日期、数字等等。它还支持自定义验证规则和错误消息。

Validator.js：这是一个轻量级的 JavaScript 库，用于验证表单输入。它支持多种验证规则，例如电子邮件地址、URL、日期、数字等等。它还支持自定义验证规则和错误消息。

FormValidation.io：这是一个全功能的表单验证库，用于验证各种类型的表单输入。它支持多种验证规则、多个错误消息、本地化支持、邮件服务器验证等等。

以上是一些流行的 JavaScript 库，用于验证电子邮件地址。它们都提供了强大的功能，可以帮助您轻松地验证表单输入。

5、stack overflow 上的解答

下面来看看来自 stack overflow 的高票答案。

const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\\.,;:\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,}))$/
    );
};

以下是一个接受 Unicode 的正则表达式示例。

const re =
  /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

请记住，不能仅依赖 JavaScript 验证，因为客户端可以轻松地禁用 JavaScript。此外，在服务器端进行验证非常重要。

以下代码片段是在客户端上使用 JavaScript 验证电子邮件地址的示例。

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[\]\\.,;:\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,}))$/
  );
};

const validate = () => {
  const $result = $("#result");
  const email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid.");
    $result.css("color", "green");
  } else {
    $result.text(email + " is invalid.");
    $result.css("color", "red");
  }
  return false;
};

$("#email").on("input", validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="email">Enter email address</label>
<input id="email" type="email" />

<p id="result"></p>

但是，这个答案会有些问题。你无法验证电子邮件地址。唯一能够验证电子邮件地址的是该电子邮件地址的提供者。例如，这个答案说这些电子邮件地址：%[email protected], “%2”@gmail.com, “a..b”@gmail.com, “a*b”@gmail.com, *@gmail.com, [email protected] , [email protected] 都是有效的，但 Gmail 永远不会允许任何一个这样的电子邮件地址存在。你应该接受该邮箱并向该邮箱发送一封带有代码/链接的电子邮件消息，用户必须访问以确认其有效性。

总结

在本文中，我们介绍了如何在 JavaScript 中验证电子邮件地址。我们使用正则表达式来验证电子邮件地址的基本格式，并添加了更多的验证规则来增强验证。我们还介绍了一些流行的 JavaScript 库，用于验证电子邮件地址，它们可以帮助我们轻松地验证表单输入。

验证电子邮件地址是 Web 开发中非常常见的任务，因为它可以帮助我们确保用户输入的数据是有效的。在编写验证函数时，我们需要注意电子邮件地址的基本格式和一些常见的验证规则，例如“@”符号的位置和是否包含至少一个点号等等。我们还可以使用现有的 JavaScript 库来加快开发速度，并获得更多的功能和可定制性。

无论我们选择哪种方法，都应该重视表单验证，并确保我们的代码能够正确处理所有可能的输入。只有这样，我们才能保证我们的应用程序安全、可靠，并且能够满足用户的需求。