如何修改HTML5表单空字段默认弹出错误提示的样式？

Chrome在近年已经移除了对原生验证气泡（比如::-webkit-validation-bubble这类伪元素）的样式支持，所以旧方案失效是正常的。要自定义提示样式，我们需要借助Constraint Validation API完全接管表单验证逻辑，用自定义的HTML/CSS来替代原生提示框。

下面结合你的现有代码，给出完整的实现步骤：

1. 修改表单基础结构 #

首先给表单添加novalidate属性禁用原生验证提示；同时给密码框补上required属性（你的密码框目前没加，建议补上），并添加存放自定义提示的容器：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 添加novalidate禁用原生提示 -->
<form class="form-login" method="post" novalidate>
  <h3>Enter Your Credentials To Login</h3>
  <div class="container-fluid">
    <div class="form-row">
      <div class="col-lg-4 mx-auto">
        <div class="input-group mb-1">
          <input autocomplete="off" type="email" name="user-email" class="form-control" placeholder="Enter Your Email Address" required autofocus="" />
          <!-- 自定义提示容器 -->
          <div class="invalid-feedback custom-error"></div>
        </div>
        <div class="input-group mb-1">
          <!-- 补上required属性 -->
          <input autocomplete="off" type="password" name="user-pass" class="form-control" placeholder="Enter Your Password" required autofocus="">
          <div class="invalid-feedback custom-error"></div>
        </div>
        <button class="btn btn-block" type="submit"><i class="fas fa-sign-in-alt"></i> Login</button>
      </div>
    </div>
  </div>
</form>

2. 编写自定义提示的CSS样式 #

根据你的需求自由调整样式，比如颜色、字体、位置等，这里结合Bootstrap风格给出示例：

/* 自定义错误提示样式 */
.custom-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none; /* 默认隐藏 */
}

/* 字段无效时显示提示 */
.form-control.is-invalid ~ .custom-error {
  display: block;
}

/* 给无效输入框添加高亮边框（可选，和Bootstrap风格统一） */
.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

3. 用JavaScript接管验证逻辑 #

通过监听表单提交和字段输入事件，实现自定义验证流程，完全替代原生提示：

document.addEventListener('DOMContentLoaded', function() {
  const loginForm = document.querySelector('.form-login');
  const requiredInputs = loginForm.querySelectorAll('input[required]');

  // 阻止原生invalid事件的默认行为，避免原生提示弹出
  requiredInputs.forEach(input => {
    input.addEventListener('invalid', e => e.preventDefault());

    // 输入时自动清除错误提示（提升用户体验）
    input.addEventListener('input', () => clearError(input));
  });

  // 表单提交时的验证逻辑
  loginForm.addEventListener('submit', function(e) {
    let isFormValid = true;

    // 遍历所有必填字段做验证
    requiredInputs.forEach(input => {
      if (!input.checkValidity()) {
        isFormValid = false;
        showError(input);
      } else {
        clearError(input);
      }
    });

    // 表单无效则阻止提交
    if (!isFormValid) e.preventDefault();
  });

  // 显示自定义错误提示的函数
  function showError(input) {
    const errorContainer = input.nextElementSibling;
    // 根据错误类型显示对应文本
    if (input.type === 'email') {
      errorContainer.textContent = input.validity.valueMissing 
        ? 'Please fill out this field' 
        : 'Please enter a valid email address';
    } else {
      errorContainer.textContent = 'Please fill out this field';
    }
    input.classList.add('is-invalid');
  }

  // 清除错误提示的函数
  function clearError(input) {
    const errorContainer = input.nextElementSibling;
    errorContainer.textContent = '';
    input.classList.remove('is-invalid');
  }
});

关键说明 #

• 这种方案完全脱离Chrome原生验证气泡，所有样式由你自主控制，不存在过时风险。
• 借助checkValidity()和validity属性，能精准判断字段错误类型（空值、格式错误等），显示更贴合场景的提示文本。
• 代码兼容Bootstrap的表单样式，能保持页面视觉一致性。

内容的提问来源于stack exchange，提问作者Thien Ngo