bootstrap 4 不支持 setcustomvalidity() 自动联动样式，需用 javascript 手动控制 is-invalid 类和 invalid-feedback 文本；data-bs-feedback 是 bootstrap 5 的误传，title 属性在 ios safari 和 firefox 中不可靠。

Bootstrap 4 不支持原生 setCustomValidity() 的自动样式联动，自定义错误提示必须靠 JavaScript 手动控制 is-invalid 类 + invalid-feedback 文本，不能只改 title 或依赖不存在的属性。

为什么 data-bs-feedback 和 title 都不靠谱

Bootstrap 4 官方文档里根本没有 data-bs-feedback 这个属性——它是 Bootstrap 5 的误传或第三方插件写法，浏览器完全忽略。而 title 属性在部分浏览器（如旧版 Chrome）会作为 fallback 提示，但 iOS Safari、Firefox 均不保证显示，且无法控制样式和时机。真正可控的方式只有 JS 主动干预。

invalid-feedback 显示不出来？先检查这三件事

常见现象是写了 <div class="invalid-feedback">邮箱格式不对</div>，但文字压根不出现。原因不是 CSS 错了，而是：

• <form></form> 标签没加 novalidate 属性，导致浏览器原生弹窗抢跑，invalid-feedback 被压制
• <input> 上没手动加 is-invalid 类，仅靠 HTML5 required 或 pattern 不会触发 Bootstrap 样式
• <div class="invalid-feedback"> 没紧挨在 <code><input> 后面——中间不能有换行、空格、注释或包裹 <div class="form-group">，必须是直接兄弟节点 <h3>怎么用 JS 统一接管错误文案和状态</h3> <p>核心逻辑：监听 <code>blur 或 submit，调 checkValidity() 判断，再手动设类和文案。不要用 reportValidity()，它会唤起原生气泡，和 Bootstrap 冲突。
  

  Bootstrap

  Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

  下载

  示例（单字段）：

  const emailInput = document.getElementById("email");
  emailInput.addEventListener("blur", function() {
    if (!this.checkValidity()) {
      this.classList.add("is-invalid");
      this.nextElementSibling.textContent = "请输入公司邮箱（例如 name@company.com）";
    } else {
      this.classList.remove("is-invalid");
      this.nextElementSibling.textContent = "";
    }
  });
  

  多个字段时，别用 querySelectorAll("input").forEach() 一锅端，不同字段提示语不同，建议按 id 或 name 分开处理。每次校验前务必先 remove("is-invalid")，否则残留类会导致后续提示错乱。

  最常被跳过的细节是：iOS Safari 对 :invalid 伪类响应极弱，哪怕结构全对，失焦后也不一定触发 checkValidity() 返回 false。必须显式监听 blur 并主动调用，不能依赖原生行为。