使用HTML5的input type="email"可实现基础邮箱格式校验，结合JavaScript与正则表达式 /^[a-zA-Z0-9.\_%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 可进行更严格的前端验证，确保用户输入合法邮箱格式，同时需注意后端重复验证以保障安全性。
邮箱验证是HTML表单中常见且重要的功能，确保用户输入的是合法的邮箱格式。虽然HTML5提供了基础的邮箱类型支持，但要实现更精确的验证，通常需要结合正则表达式和JavaScript进行处理。
使用HTML5内置邮箱类型
最简单的方式是使用 input type="email"，浏览器会自动对邮箱格式做基本校验：
<form><label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
这种方式无需手动编写正则，适用于大多数场景，但不能完全防止某些边缘格式通过。
自定义正则表达式验证邮箱格式
如果需要更严格的控制，可以使用JavaScript配合正则表达式进行验证。以下是一个常用且较为准确的邮箱正则：
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
这个正则的含义是：
- 开头为字母、数字及常见符号（._%+-）
- 必须包含 @ 符号
- @ 后为域名部分，包含字母、数字、点和连字符
- 最后以点加至少两个字母结尾（如 .com、.cn）
结合JavaScript实现完整验证
在表单提交时进行验证，提示错误信息：
<form id="myForm"><input type="text" id="email" placeholder="请输入邮箱">
<span id="error" style="color: red;"></span>
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById("myForm");
const emailInput = document.getElementById("email");
const errorSpan = document.getElementById("error");
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
form.addEventListener("submit", function (e) {
errorSpan.textContent = "";
if (!emailInput.value) {
errorSpan.textContent = "邮箱不能为空";
e.preventDefault();
} else if (!emailRegex.test(emailInput.value)) {
errorSpan.textContent = "请输入有效的邮箱地址";
e.preventDefault();
}
});
</script>
注意事项与优化建议
虽然正则可以判断格式是否合理，但无法确认邮箱是否真实存在。实际项目中可考虑：
- 前端验证用于提升用户体验
- 后端必须重复验证，防止绕过
- 对特殊邮箱（如 company+tag@domain.com）保持兼容
- 避免过度复杂正则，以免误判合法邮箱
基本上就这些。HTML邮箱验证不复杂，但细节容易忽略，合理使用type="email"和正则结合，能有效提升表单质量。
