本文介绍如何正确实现邮箱格式校验，并在表单提交后不跳转页面、直接在当前页动态显示“确认邮件已发送至 [xxx@xxx.com]”的成功提示，避免原代码中正则失效和页面跳转导致的数据丢失问题。
本文介绍如何正确实现邮箱格式校验，并在表单提交后不跳转页面、直接在当前页动态显示“确认邮件已发送至 [xxx@xxx.com]”的成功提示，避免原代码中正则失效和页面跳转导致的数据丢失问题。
在前端表单交互中，邮箱验证与提交反馈是常见需求。但原始代码存在两个关键问题：一是邮箱正则表达式过于严苛（如不支持 + 号、国际化域名或常见别名格式），导致合法邮箱（如 test+newsletter@gmail.com）被误判为无效；二是使用 form action="./subscript.html" 配合 target="_self" 会强制页面跳转，使 JavaScript 的 e.preventDefault() 失效，且无法在新页面中安全读取上一页的输入数据（因跨页面无共享 DOM 上下文）。
✅ 推荐解决方案：纯前端动态反馈（无需跳转）
保留原有 HTML 结构，仅调整 JS 行为——阻止默认提交，验证通过后直接更新当前页面内容：
<form method="get" class="form"> <small>Email address</small> <small class="valid-notice">Valid email required</small> <input class="email" type="email" name="email" placeholder="your@email.com"> <input class="submit-btn" type="submit" value="Subscribe to monthly newsletter"> </form>
const emailInput = document.querySelector(".email");
const form = document.querySelector(".form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const email = emailInput.value.trim();
if (!test(email)) {
errorEmail(emailInput);
} else {
// 清除错误状态
emailInput.classList.remove("error-border");
document.querySelector(".valid-notice").style.display = "none";
// 动态生成成功提示
const message = document.createElement("p");
message.textContent = `A confirmation email has been sent to ${email}.`;
message.style.color = "#28a745";
message.style.fontWeight = "500";
message.style.marginTop = "16px";
// 替换整个表单为提示信息（也可插入到表单下方）
form.replaceWith(message);
}
});
function test(email) {
// 使用更健壮的邮箱正则（兼容主流邮箱格式，含 + 号、子域名等）
const validEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return email && validEmail.test(email);
}
function errorEmail(input) {
const validNotice = document.querySelector(".valid-notice");
input.classList.add("error-border");
validNotice.style.display = "inline-block";
}.error-border {
border: 1px solid #dc3545 !important;
outline: none;
}
.valid-notice {
display: none;
color: #dc3545;
font-size: 0.85rem;
margin-top: 4px;
}⚠️ 注意事项：
- 不要依赖 type="email" 的浏览器原生验证作为唯一手段（它不校验 MX 记录，且部分正则行为不一致），应以 JS 主动验证为准；
- 若必须跳转到 subscript.html，需改用 URL 参数传递（如 ./subscript.html?email=test@example.com），并在目标页用 URLSearchParams 解析，但该方式存在 XSS 风险，务必对输出做 HTML 转义；
- 生产环境建议配合后端验证，前端仅作用户体验优化；
- 示例中 replaceWith() 会移除整个表单，如需保留按钮或添加「重新订阅」功能，可改为 form.insertAdjacentElement('afterend', message) 并隐藏表单。
此方案轻量、可靠、符合现代 Web 实践，兼顾可用性与安全性。
