通过在 <form> 上添加 novalidate 属性禁用浏览器默认验证弹窗，并结合 JavaScript 手动校验与 DOM 操作，即可完全接管错误提示的显示逻辑、内容和样式。

通过在 `

` 上添加 `novalidate` 属性禁用浏览器默认验证弹窗，并结合 javascript 手动校验与 dom 操作，即可完全接管错误提示的显示逻辑、内容和样式。

在现代网页开发中，原生 HTML 表单验证（如 type="email"）虽能提供基础校验能力，但其内置错误提示（如 Chrome 中白色悬浮气泡“Please enter a valid email”）无法通过 CSS 定制样式，且交互体验僵硬。要实现如 Bookmark Landing Page 那样美观、可控的自定义错误提示（例如红色文字、图标、动画或嵌入式 <div>），关键在于主动接管验证流程，而非依赖浏览器默认行为。

✅ 正确做法：novalidate + 手动校验

推荐方案是为 <form> 添加 novalidate 属性——它会禁用所有原生约束验证（包括 required、type="email" 等触发的弹窗），但保留输入框的语义、自动填充（autofill）、键盘类型（如移动设备邮箱键盘）等关键用户体验特性。这比将 type="email" 改为 type="text" 更专业、更兼容。

随后，使用 JavaScript 进行自定义校验逻辑，并动态控制错误提示元素的显隐与内容：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<form class="cta-form" novalidate>
  <input id="email" class="email-textbox" type="email" placeholder="Enter your email address" required>
  <input class="btn-contact" type="submit" value="Contact Us">
  <div id="email-error" class="error-message" style="display: none; color: #e74c3c; font-size: 0.875rem; margin-top: 0.5rem;">
    ❌ Whoops, you entered an invalid email
  </div>
</form>

const form = document.querySelector('.cta-form');
const emailInput = document.getElementById('email');
const errorDiv = document.getElementById('email-error');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止默认提交

  const email = emailInput.value.trim();
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); // 更严谨的邮箱正则

  if (!isValid) {
    errorDiv.style.display = 'block';
    emailInput.classList.add('invalid'); // 可选：添加 CSS 状态类
  } else {
    errorDiv.style.display = 'none';
    emailInput.classList.remove('invalid');
  }
});

? 提示：上述正则 ^[^\s@]+@[^\s@]+\.[^\s@]+$ 比简单的 .includes("@") 更可靠，可拦截 @example.com 或 user@ 等常见无效格式，同时避免过度复杂化（生产环境如需 RFC 严格校验，建议后端二次验证）。

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

⚠️ 注意事项与最佳实践

• 不要移除 type="email"：保留它能确保移动端调起邮箱专用键盘、支持浏览器自动填充和拼写检查。
• 务必调用 e.preventDefault()：否则表单仍会按默认方式提交并触发原生验证。
• 增强可访问性（a11y）：为错误消息添加 aria-live="polite" 和关联 aria-describedby，让屏幕阅读器可读：

  <input id="email" aria-describedby="email-error" ...>
  <div id="email-error" aria-live="polite">...</div>

• 考虑实时反馈：可监听 input 或 blur 事件做即时校验，提升用户体验；但首次提交时必须执行最终校验。
• 服务端兜底：前端校验仅为体验优化，所有关键验证（如邮箱格式、唯一性）必须在服务端重复执行。

通过 novalidate 解耦浏览器默认行为，再以简洁、可维护的 JS 逻辑驱动 UI 状态，你就能完全掌控错误提示的文案、样式、位置与动效——真正实现专业级表单体验。