如何通过_input type=email_规则实现邮箱格式验证？

本文共计799个文字，预计阅读时间需要4分钟。

会，但只做基础格式检查，不是真正发邮件确认。浏览器内置的type属性。

它不验证域名是否存在、MX 记录是否有效，也不检查邮箱是否真实可收信。也就是说，test@.com 或 user@@example.com 会被拦住，但 hello@world（无后缀）在某些旧版 Chrome 中可能通过，而 admin@mail.example（合法子域名）通常能过。

哪些字符被允许？和 RFC 5322 一致吗

不一致。浏览器实现远比 RFC 5322 简化——它只参考了 WHATWG HTML 规范定义的宽松规则，例如：

• + 和 - 在用户名部分通常允许（如 me+tag@gmail.com）
• 带引号的用户名（如 "john.doe"@example.com）不被支持，多数浏览器直接报错或截断
• IDN 域名（如含中文的 张三@例子.中国）需先转为 punycode（xn--zr8h@xn--fsq097e.cn），否则无效
• 长度限制由浏览器决定，一般总长不超过 256 字符，但无强制统一标准

为什么加了 required 还能绕过验证

常见原因有三个：

立即学习“前端免费学习笔记（深入）”；

• 用户用空格开头或结尾，比如填了 " user@example.com " —— type="email" 默认不 trim，空格导致校验失败，但部分浏览器仍认为“非空”，从而绕过 required
• 表单用了 novalidate 属性，整个原生验证被禁用
• JS 主动调用 form.submit() 而没触发 checkValidity()，跳过了验证流程

解决办法：提交前手动 trim 并校验：

const emailInput = document.querySelector('input[type="email"]');<br>emailInput.value = emailInput.value.trim();<br>if (!emailInput.checkValidity()) {<br> emailInput.reportValidity();<br>}

要不要依赖原生 email 验证做关键逻辑

不要。它只是用户体验层的辅助，不能替代后端校验。

前端可用来快速反馈格式错误，但所有邮箱字段必须在服务端用更严谨的方式验证，比如：

• 用成熟的库（如 Python 的 email-validator、Node.js 的 is-email）做语法 + DNS 检查
• 对用户注册场景，必须发送确认邮件并等待点击链接或输入验证码
• 避免仅靠正则（尤其是网上抄的“一行邮箱正则”），它们要么太松（放过明显非法值），要么太紧（拒绝合法邮箱如 postbox@localhost）

最常被忽略的一点：用户粘贴邮箱时可能带不可见字符（如零宽空格、U+200B），这类字符在输入框里看不见，却会让 checkValidity() 返回 false，需要额外清理。