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

技术背景

在前端开发中，常常需要对用户输入的电子邮件地址进行验证。确保用户输入的是有效的电子邮件地址，能提高数据的准确性和系统的安全性。JavaScript 提供了多种方式来实现电子邮件地址的验证，其中使用正则表达式是最常见的方法。

实现步骤

1. 使用正则表达式验证

正则表达式可以匹配特定模式的字符串，通过定义合适的正则表达式，可以验证电子邮件地址的格式是否正确。

简单验证

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

console.log(validateEmail('[email protected]')); // true
console.log(validateEmail('invalidemail')); // false

更复杂的验证

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,}))$/
    );
};

2. 利用 HTML5 的 email 输入类型

HTML5 提供了 input 元素的 email 类型，浏览器会自动对输入的电子邮件地址进行基本的验证。

<form>
  <label>Email Address
    <input type="email" placeholder="[email protected]" required>
  </label>
  <input type="submit">
</form>

3. 使用 DOM 方法验证

在现代浏览器中，可以使用 DOM 方法结合 HTML5 的验证机制进行验证。

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity === 'function' ? input.checkValidity() : /\S+@\S+\.\S+/.test(value);
}

核心代码

以下是几种不同的正则表达式及其使用示例：

简单正则表达式

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

基于 RFC 2822 的正则表达式

var emailCheck = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
console.log(emailCheck.test('[email protected]'));

考虑 Unicode 的正则表达式

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

最佳实践

• 客户端和服务器端双重验证：虽然客户端验证可以提供即时反馈，但 JavaScript 可以被客户端禁用，因此必须在服务器端进行二次验证。
• 选择合适的正则表达式：根据具体需求选择合适的正则表达式。简单的验证可以使用简单的正则表达式，而严格的验证可以使用符合 RFC 标准的正则表达式。
• 测试正则表达式：在使用正则表达式之前，务必在不同的测试用例上进行测试，确保其能正确验证各种合法和非法的电子邮件地址。

常见问题

1. 正则表达式无法覆盖所有情况

电子邮件地址的格式非常复杂，很难用一个正则表达式覆盖所有合法的情况。因此，正则表达式只能作为初步验证，最终的验证还需要通过发送验证邮件来完成。

2. 大小写问题

虽然电子邮件地址在技术上可能区分大小写，但在实际应用中，通常将其视为不区分大小写。因此，在验证之前可以将输入的电子邮件地址转换为小写。

3. 特殊字符问题

电子邮件地址中可以包含特殊字符，但在使用正则表达式时需要正确处理这些字符。例如，引号和转义字符需要在正则表达式中进行特殊处理。