如何在 JavaScript 中验证电子邮件地址

在开发Web应用程序的过程中，验证用户输入的电子邮件地址是一个常见需求。尽管看似简单，但要准确地验证电子邮件地址并非易事。本文将探讨如何使用正则表达式在JavaScript中进行电子邮件地址的验证，同时介绍一些最佳实践与具体代码实例。

使用正则表达式进行验证

正则表达式（Regular Expression，简称Regex）是处理字符串匹配的一种强大工具。使用正则表达式，我们可以有效地验证电子邮件地址的格式。

基本的电子邮件验证正则表达式

一个简单的正则表达式可以检查电子邮件地址的基础格式，例如它包含“@”符号和域名后缀：

const validateEmail = (email) => {
  return email.match(
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  );
};

上面的正则表达式检查电子邮件地址的格式是否符合 anything@anything.anything 的模式，确保地址有且仅有一个“@”符号，并且之后包含一个点（“.”）符号。

示例代码

以下是一个完整的示例，展示了如何在JavaScript中通过正则表达式来验证电子邮件地址，并提供即时的用户反馈：

const validateEmail = (email) => {
  return email.match(
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  );
};

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>

更复杂的电子邮件验证

虽然简单的正则表达式可以处理基本情况，但更复杂的正则表达式可以覆盖更多的边界情况，确保电子邮件地址的格式更为准确。

允许Unicode字符的正则表达式

我们可以使用以下正则表达式来支持Unicode字符：

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

更为严格的RFC 2822标准正则表达式

RFC 2822是电子邮件地址的官方标准，它定义了电子邮件地址必须遵守的语法规则。以下正则表达式更严格地遵循了RFC 2822标准：

const validateEmailRFC2822 = (email) => {
  return email.match(
    /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
  );
};

注意事项

虽然在客户端进行电子邮件验证是一个很好的用户体验，但它并不可靠。客户端的验证可以被轻易绕过，例如通过禁用JavaScript。因此，始终在服务器端再次验证电子邮件地址是至关重要的。

使用HTML5进行基本验证

HTML5已内置了电子邮件验证功能，只需使用<input type="email">即可：

<form>
  <label>Email Address
    <input type="email" placeholder="me@example.com" required>
  </label>
  <input type="submit">
</form>

结论

在JavaScript中验证电子邮件地址可以通过使用正则表达式有效地实现。无论是简单的还是复杂的正则表达式，都可以帮助我们捕捉绝大多数的格式错误。但请记住，始终需要在服务器端进行进一步的验证以确保安全性和可靠性。希望本文提供的示例和建议能帮助大家更好地处理电子邮件地址验证问题。