Bootstrap 5 表单验证(Validation)自定义提示样式-Bootstrap教程-PHP中文网

bootstrap 5 表单验证需 javascript 主动控制 is-valid/is-invalid 类、反馈文案及 setcustomvalidity()，form 必须加 novalidate 或 was-validated 才能启用样式；状态类须加在控件本身，反馈元素须紧邻控件；ios safari 需手动同步状态以确保及时响应。

bootstrap 5 表单验证(validation)自定义提示样式

Bootstrap 5 的表单验证提示样式不能靠纯 CSS 自动更新，必须配合 JavaScript 主动控制 is-valid/is-invalid 类、valid-feedback/invalid-feedback 文案，以及原生 setCustomValidity() 的调用时机 —— 否则你看到的永远是浏览器默认气泡或完全没反馈。

form 标签必须加 `novalidate` 或 `was-validated`

这是整个验证流程启动的前提。不加的话，Bootstrap 的 CSS 规则（比如 .was-validated .form-control:invalid）压根不会生效，红色边框和反馈文字都出不来。

novalidate：禁用浏览器默认弹窗，把控制权完全交给 JS；适合需要自定义文案、联动校验（如两次密码）、或兼容 iOS Safari 的场景
was-validated：通常由 JS 在 submit 时动态添加，表示“已触发过一次验证”，之后所有 :invalid/:valid 伪类才开始参与样式计算
别混用：同时加 novalidate 和 was-validated 没问题；但只加 needs-validation 而不配 JS 监听 submit，样式也不会动

`is-valid` 和 `is-invalid` 必须加在控件本身，不是外层容器

常见错误是把 is-invalid 加在 <div class="mb-3"> 上，结果边框颜色不变、反馈文字也不显示 —— Bootstrap 5 只认直接作用于 <code><input>、<select></select>、<textarea></textarea> 的状态类。

正确写法：<input type="email" class="form-control is-invalid"><div class="invalid-feedback">邮箱格式不对</div>
反馈元素 <div class="invalid-feedback"> 必须紧跟在对应控件之后，中间不能插其他标签（比如 <code><br> 或空文本节点）
iOS Safari 下，:invalid 伪类触发延迟，所以仅靠伪类 + novalidate 不够稳；必须用 JS 主动设 class 才能确保 blur 或 input 时立刻响应

自定义规则要用 `setCustomValidity()` + 手动同步状态

HTML5 原生的 required、type="email" 等能自动触发 is-invalid，但像“密码需含数字”“用户名已被占用”这类逻辑，得靠 setCustomValidity()，且 Bootstrap 完全不监听它变化。

VPS Bootstrap

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

下载

调用 input.setCustomValidity('密码太短') 后，input.checkValidity() 返回 false，但 DOM 上不会自动加 is-invalid
必须手动：if (!input.checkValidity()) { input.classList.add('is-invalid'); input.nextElementSibling.textContent = '密码太短'; }
记得在 input 或 blur 事件里重置：输入内容变了就调 input.setCustomValidity('')，再删 is-invalid、清空 feedback 文本、加 is-valid（如果通过）
别漏掉 reportValidity()：它会强制触发展示（包括 Safari），但只应在提交时用；日常交互建议用 checkValidity() 配合手动更新