如何覆盖HTML邮箱输入框的默认验证错误消息样式？

那个页面的实现逻辑是用JavaScript拦截表单的默认提交行为，自行完成邮箱格式校验，然后展示自定义错误提示，完全绕开浏览器自带的表单验证提示。具体步骤和代码实现如下：

1. 改造HTML结构 #

先给表单添加一个用于展示自定义错误的容器：

<form class="cta-form">
  <input class="email-textbox" type="email" placeholder="Enter your email address">
  <!-- 自定义错误提示容器，初始隐藏 -->
  <div class="email-error" style="display: none; color: #ff5252; font-size: 14px; margin-top: 8px;">Whoops, you entered an invalid email</div>
  <input class="btn-contact" type="submit" value="Contact Us">
</form>

2. 编写核心JavaScript逻辑 #

通过监听表单提交事件，阻止浏览器默认行为后手动校验邮箱：

const form = document.querySelector('.cta-form');
const emailInput = document.querySelector('.email-textbox');
const errorElement = document.querySelector('.email-error');

// 通用邮箱格式校验正则
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

form.addEventListener('submit', function(e) {
  // 阻止浏览器自带的表单提交和验证提示
  e.preventDefault();
  
  const emailValue = emailInput.value.trim();
  
  // 执行邮箱校验
  if (!emailRegex.test(emailValue)) {
    // 显示自定义错误提示
    errorElement.style.display = 'block';
    // 给输入框添加错误样式（可选）
    emailInput.classList.add('input-error');
  } else {
    // 校验通过，清除错误状态
    errorElement.style.display = 'none';
    emailInput.classList.remove('input-error');
    // 这里可以添加实际的表单提交逻辑，比如用fetch发送数据
    // form.submit(); // 如果需要走传统表单提交
  }
});

3. 可选：添加实时校验（提升用户体验） #

如果想在用户离开输入框时就触发校验，而不是等到点击提交：

emailInput.addEventListener('blur', function() {
  const emailValue = this.value.trim();
  if (emailValue && !emailRegex.test(emailValue)) {
    errorElement.style.display = 'block';
    this.classList.add('input-error');
  } else if (this.classList.contains('input-error')) {
    errorElement.style.display = 'none';
    this.classList.remove('input-error');
  }
});

关键说明 #

• 阻止submit事件的默认行为是核心，这会直接禁用浏览器自带的验证弹窗
• 自定义校验逻辑完全可控，你可以根据需求调整正则表达式（比如支持特殊域名、多后缀邮箱）
• 错误提示的样式可以完全自定义，和目标页面的视觉风格匹配

内容的提问来源于stack exchange，提问作者Jim Christiano