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