Bootstrap表单校验需同时满足：form加needs-validation或was-validated类、input加required属性、提交时调checkValidity()或失焦时调reportValidity()，否则边框不会变红。

为什么加了 required 却没变红

浏览器原生校验不会自动给输入框加红边，required 本身只触发表单提交拦截和 :invalid 状态，但 Bootstrap 不靠这个伪类驱动样式。默认情况下，即使字段为空，.form-control 也不会变成红色——除非你手动加了 .is-invalid 类，或整个表单有 .was-validated 类且已提交过。

• 没加 .was-validated 到 <form> 标签上：这是 Bootstrap 启用内置校验样式的开关，缺了它，.is-invalid 可能不生效或颜色不对
• 只改了 input:invalid CSS，但没配 required 或语义化 type（如 email）：浏览器压根不进入 :invalid 状态，伪类自然不触发
• 用了 e.preventDefault() 却没调 form.checkValidity()：主动阻断了原生校验流程，导致状态不更新、class 不添加

.was-validated 和 .needs-validation 的区别

两者都用于开启 Bootstrap 表单校验样式，但行为不同：.was-validated 表示“已经验证过”，会立即对所有无效字段应用 .is-invalid；.needs-validation 是“待验证”，只在提交时才批量触发样式，更适合防静默提交。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• .was-validated：适合页面加载后就高亮空必填项（比如用户离开再回来），但容易造成“一打开全红”的干扰体验
• .needs-validation：更推荐，配合 novalidate 属性使用，把校验控制权交给 JS，避免原生气泡干扰 UI
• 二者都要求 input 带 required，否则 .is-invalid 不会被自动加到对应元素上

如何让空必填项失焦即变红

不能只等提交，得监听 blur 并手动触发校验反馈。关键不是改边框色，而是让 Bootstrap 正确识别并标记状态。

• 给 input 绑定 blur 事件，调用 input.reportValidity()：它会触发原生提示（可选），同时将 .is-invalid 加到当前元素（前提是父 form 有 .needs-validation）
• 手动补 .is-invalid 要谨慎：直接 el.classList.add("is-invalid") 可能绕过 Bootstrap 内部状态管理，后续 setCustomValidity("") 清除时未必同步移除 class
• 确保校验逻辑和 DOM 结构对齐：如果 input 在 .input-group 里，.is-invalid 必须加在 .form-control 上，而不是外层 wrapper

边框变红但图标/文字不一致？检查这些地方

Bootstrap 的红边、红图标、红提示文字由多个独立规则控制，漏掉一个就会视觉割裂。

• .form-control.is-invalid 控制边框色，但 .form-control.is-invalid:focus 还要单独设 box-shadow，否则聚焦时边框又变蓝
• 校验图标是 background-image，路径错一个字符（比如漏了 URL 编码的 %3c）就显示空白，别手改 data URL
• 错误提示文字需放在 .invalid-feedback 元素里，且该元素必须紧跟在 input 后面，否则 display: block 不生效
• 如果用了 form-floating，.invalid-feedback 得放在 .form-floating 容器内，否则定位错乱

实际最简可行路径是：给 <form> 加 class="needs-validation" 和 novalidate → 所有必填 input 加 required → 监听 submit 时调 form.checkValidity() → 失焦时用 reportValidity()。其他花式定制，都是在这基础上叠 layer，别一开始就绕开这个基线。