Bootstrap 4/5仅提供表单样式和基础类（如form-group、mb-3、is-invalid），不内置验证逻辑；需手动实现密码强度校验、新旧密码比对、错误状态同步及防重复提交等交互功能。
直接用 Bootstrap 4 或 5 的表单组件就能搭出可用的修改密码页，不需要额外框架或插件——但必须手动处理验证逻辑和提交行为，Bootstrap 本身不接管表单提交或密码强度校验。
用 form + form-group 布局基础结构
Bootstrap 4/5 都推荐语义化 <form></form> 包裹，每个字段用 form-group（Bootstrap 4）或 mb-3（Bootstrap 5）控制垂直间距。密码字段必须设 type="password"，且至少包含三项：current_password、new_password、confirm_password。
常见错误是漏掉 id 和 for 关联，导致点击 label 不聚焦输入框；另外，Bootstrap 5 移除了 form-group 类，直接用间距工具类更稳妥。
-
<label for="current_password">当前密码</label>必须与对应<input id="current_password">匹配 - Bootstrap 5 推荐用
<div class="mb-3"> 替代 <code>form-group - 所有
input必须有name属性，后端才能接收字段 - 校验不通过时执行：
input.classList.add('is-invalid')，并设置feedbackEl.textContent = '密码长度不能少于8位' - 校验通过后务必调用
input.classList.remove('is-invalid') -
invalid-feedback必须紧跟在对应input后面，且在同一mb-3容器内 - 比对确认密码时，用
new_password.value === confirm_password.value，不要用== - 避免在
onblur单次触发，改用input事件实现即时反馈 - 正则校验建议放在提交前统一执行，否则频繁触发影响性能
- 提交前设：
submitBtn.disabled = true; submitBtn.textContent = '提交中...' - 无论成功或失败，都应在回调里恢复：
submitBtn.disabled = false; submitBtn.textContent = '保存修改' - 后端返回 422（校验失败）时，应解析响应体中的字段错误，映射回对应 input 的
is-invalid状态
用 is-invalid 和 invalid-feedback 显示校验错误
前端 JS 校验失败时，给 input 加 is-invalid 类，并在下方放 <div class="invalid-feedback"> 显示提示。这个样式只负责视觉反馈，不触发任何逻辑。
<p>容易踩的坑：忘记移除旧的 <code>is-invalid 类，导致多次提交后错误状态残留；或者把 invalid-feedback 放在 input 外层 div 之外，导致无法被正确显示。
密码强度和一致性校验必须手写 JS，Bootstrap 不提供
Bootstrap 没有内置密码强度检测或两次输入比对功能。你需要监听 new_password 和 confirm_password 的 input 事件，实时比对值，并检查正则（比如 /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/）。
注意：仅前端校验不可靠，但用户交互体验依赖它；后端仍需重复校验，且要防止暴力重试（比如加 token 或限流）。
提交按钮禁用状态和防重复点击
点击提交后应立刻禁用按钮并改文字（如从“保存修改”变成“提交中…”），否则用户可能连点多次，造成重复请求。这和 Bootstrap 无关，但和 UX 强相关。
很多人只做 UI 禁用，却没在 JS 中清除 loading 状态——比如请求失败后按钮一直灰着，用户无法重试。
真正难的不是布局，而是把前端校验、状态同步、错误映射、防重复提交这几件事串成闭环；缺一环，页面就显得“卡”或“不响应”。尤其是错误信息怎么精准落到对应输入框下，最容易被忽略。
