本文讲解如何使用原生 javascript 实现邮箱格式实时校验，并在验证通过后不跳转页面、直接在当前页动态渲染“确认邮件已发送至 [xxx@example.com]”提示，避免传统 get 跳转导致的数据丢失与体验割裂。
本文讲解如何使用原生 javascript 实现邮箱格式实时校验，并在验证通过后不跳转页面、直接在当前页动态渲染“确认邮件已发送至 [xxx@example.com]”提示，避免传统 get 跳转导致的数据丢失与体验割裂。
在实际网页开发中，常见的“邮箱订阅”功能需兼顾前端校验可靠性与用户反馈即时性。您原始代码存在两个关键问题：一是正则表达式虽基本有效，但对空字符串和边界情况（如仅含 @ 或纯点号）容错不足；二是采用
<script> 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"); const validNotice = document.querySelector(".valid-notice"); validNotice.style.display = "none"; // 创建并插入确认消息（替代整个页面内容） const message = document.createElement("p"); message.innerHTML = `A confirmation email has been sent to <strong>${escapeHtml(email)}.`; message.style.cssText = "color: #27ae60; font-size: 1.1em; margin: 24px 0; text-align: center;"; // 替换整个 body 内容（或更推荐：替换 form 父容器） const container = form.parentElement; container.innerHTML = ""; container.appendChild(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) { input.classList.add("error-border"); const validNotice = document.querySelector(".valid-notice"); validNotice.style.display = "inline-block"; } // 防 XSS：简易 HTML 转义函数 function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(/, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } </script>? 关键优化说明：
- 正则升级：采用更符合 RFC 5322 的简化版邮箱正则，明确排除空值、首尾空格及非法字符，test() 函数增加 email && 判断确保非空；
- 安全输出：使用 escapeHtml() 对用户输入的邮箱进行 HTML 实体转义，防止 XSS 注入（例如输入 <script>alert(1)</script>@test.com）；
- DOM 操作优化：不调用 document.body.replaceChildren()（兼容性差），改用 container.innerHTML = "" 后追加，语义更清晰；
- 用户体验增强：成功后移除错误边框、隐藏提示文字，并居中高亮显示确认语句，视觉反馈明确。
⚠️ 注意事项：
- 此方案为纯前端验证，不可替代后端校验。真实项目中必须在服务端再次验证邮箱格式与可送达性（如 SMTP 检查）；
- 若业务强依赖跳转至 subscript.html，请改用 URLSearchParams 解析 window.location.search 获取邮箱参数，并在该页面内渲染（需同步处理 URL 编码与 XSS）；
- 输入框 type="email" 已被替换为 type="text"，因原生 type="email" 的默认校验行为与自定义逻辑冲突，统一由 JS 控制更可靠。
通过以上实现，您将获得一个健壮、安全、用户体验流畅的邮箱订阅流程——验证即时、反馈直观、代码可维护性强。
