适配谷歌注册/登录规则的邮箱验证Regex解决方案求助

问题根源 #

你当前的正则表达式/^([a-z0-9]+)([\.{1}])?([a-z0-9]+)\@(([a-z0-9-])+\.)+([a-z0-9]{2,4})/g存在以下问题：

• 仅支持「字母数字段+可选单个句点+字母数字段」的两段式用户名，无法匹配多段式（如test.test.test）
• 未实现用户名长度限制（6-30字符）
• 未校验「首尾不能是句点」「禁止连续句点」「禁止指定特殊字符」的规则
• 使用全局标志g在match中可能导致匹配异常

正确正则表达式 #

以下正则完全符合你列出的谷歌用户名规则：

/^(?![.])(?!.*[.]{2})(?!.*[&=_'\-+,<>])[a-z0-9.]{6,30}@(([a-z0-9-]+\.)+[a-z0-9]{2,4})$/i

正则各部分解析 #

• ^(?![.])：断言用户名开头不能是句点
• (?!.*[.]{2})：断言用户名中不存在连续两个句点
• (?!.*[&=_'\-+,<>])：断言用户名中不包含&、=、_、'、-、+、,、<>这些禁止字符
• [a-z0-9.]{6,30}：限定用户名只能由字母、数字、句点组成，长度6-30字符
• @(([a-z0-9-]+\.)+[a-z0-9]{2,4})$：匹配标准邮箱域名结构，支持多级子域名（如test.co、test.test.com）
• /i：忽略大小写，兼容谷歌用户名不区分大小写的特性

修改后的完整代码 #

JavaScript部分 #

let email = document.getElementById("email")

// 预编译正则，提升性能
const emailValidator = /^(?![.])(?!.*[.]{2})(?!.*[&=_'\-+,<>])[a-z0-9.]{6,30}@(([a-z0-9-]+\.)+[a-z0-9]{2,4})$/i;

email.onkeyup = () => {
  const inputValue = email.value.trim();
  
  if (!inputValue) {
    console.log("请输入邮箱地址。");
    return false;
  }

  if (emailValidator.test(inputValue)) {
    console.log("邮箱格式正确。");
    return true;
  } else {
    console.log(`${inputValue} - 是无效的邮箱地址！`);
    return false;
  }
}

HTML部分（无需修改，可直接使用） #

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    input {
      margin: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 30px;
      width: 250px;
    }
  </style>
</head>

<body>
  <input type="email" id="email" placeholder="Please enter your email" autofocus required>
</body>

</html>

优化说明 #

1. 预编译正则表达式，避免每次触发事件时重复编译，提升性能
2. 使用trim()处理输入首尾空格，避免空字符干扰验证
3. 简化逻辑分支，无需重复调用match，一次test即可完成验证

内容的提问来源于stack exchange，提问作者Tabassam Ali