JavaScript中验证电子邮件地址的方法

技术背景

在前端开发中，常常需要对用户输入的电子邮件地址进行验证，以防止最基本的输入错误，避免将无效的邮件地址发送到服务器或尝试向其发送邮件。虽然最终验证电子邮件地址是否有效需要通过服务器端发送验证邮件，但前端的初步验证可以提升用户体验和减少不必要的服务器请求。

实现步骤

1. 使用正则表达式进行验证

正则表达式是验证电子邮件地址的常用方法。以下是几种不同复杂度的正则表达式示例：

简单验证

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

这个正则表达式确保输入包含一个 @ 符号，并且 @ 前后都有非空白字符，最后以一个 . 和至少一个非空白字符结尾。

更严格的验证

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

这个正则表达式考虑了更多的边界情况，如IP地址形式的域名、带引号的用户名等。

2. 使用HTML5的email输入类型

HTML5本身提供了电子邮件验证功能：

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

当用户输入不符合电子邮件格式时，浏览器会自动提示错误。

3. 使用现代浏览器的DOM方法

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);
}

这种方法结合了现代浏览器的 checkValidity 方法和简单的正则表达式，以兼容旧浏览器。

核心代码

简单验证示例

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

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

HTML5验证示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form>
        <label>Email Address
            <input type="email" placeholder="[email protected]" required>
        </label>
        <input type="submit">
    </form>
</body>
</html>

现代浏览器DOM方法示例

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);
}

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