Bootstrap需添加needs-validation类和novalidate属性才能启用校验样式；Bulma靠手动切换is-danger/is-success类；Ant Design的Form.Item自动管理验证样式；跨框架统一关键在于同步label、input、help text三层节点状态。
用 Bootstrap 的 needs-validation 类触发原生校验样式
Bootstrap 5 默认不自动启用表单校验视觉反馈，必须显式添加 needs-validation 类，并配合 novalidate 属性才能让框架接管样式逻辑。否则你写的 required 或 type="email" 只会触发浏览器默认弹窗，和 Bootstrap 样式无关。
-
needs-validation是开关，不是装饰类——没它，.is-invalid、.invalid-feedback等样式不会被激活 - 必须同时加
novalidate，否则浏览器原生校验会打断流程，导致红色边框闪一下就消失 - 提交时调用
form.checkValidity()后要手动加was-validated类，否则错误提示不显示 - 注意：只对带验证属性的元素生效（
input、select、textarea），包裹它的div不会自动获得状态类
用 Bulma 的 is-danger / is-success 手动控制状态
Bulma 不绑定任何 JS 行为，所有验证样式都靠你手动切换类名。好处是完全可控，坏处是容易漏掉某个状态同步——比如改了输入框的 is-danger，但忘了更新对应的 .help.is-danger 文字。
- 输入框加
is-danger→ 红色边框 + 错误图标；加is-success→ 绿色边框 + 对勾图标 - 提示文字必须用
.help.is-danger或.help.is-success，不能只写.help - 推荐监听
blur而非input：避免用户刚输一个字母就报错，体验更自然 - 别直接操作
classList.add，先classList.remove('is-danger', 'is-success')清旧状态，防止残留
Ant Design 的 Form.Item 自动管理验证样式
AntD 是唯一真正“开箱即用”的方案：只要配好 name 和 rules，错误边框、提示文字、加载态都会自动渲染，连 DOM 结构都不用你手写。
-
rules里设validateTrigger: 'onBlur'比'onChange'更合理，减少干扰 - 手动校验用
form.validateFields()，失败时会自动滚动到第一个错误字段，且高亮全部问题项 - 如果自定义校验函数返回
Promise.reject()，必须传errorInfo对象，否则样式不触发 - 不要试图用 CSS 覆盖
.ant-form-item-has-error .ant-input的边框色——优先改token主题变量，否则容易在不同组件间不一致
跨框架统一的关键其实是 DOM 结构约定
不同框架的样式类名不同，但背后依赖的 HTML 结构高度相似：label → input → help text 这个三段式嵌套。真正影响多端一致性的，不是类名，而是你有没有把验证状态同步到这三层节点上。
立即学习“前端免费学习笔记（深入）”；
- 错误时：label 加
text-danger（Bootstrap）、has-text-danger（Bulma）或保持默认（AntD 隐藏 label） - input 加对应状态类（
is-invalid/is-danger/ 自动注入） - help text 必须存在且与 input 状态严格同步，否则屏幕阅读器会读错
- 移动端小屏下，所有框架都依赖
flex或grid布局重排，别用固定 width —— 宽度交给col-*或field容器管
验证样式看起来只是边框变红，实际要同步控制至少四个地方：输入框本身、关联 label、帮助文字、以及可能存在的图标容器。漏掉任意一个，就会出现“边框红了但提示没出”或“提示出了但 label 还是黑色”这种割裂感。
