Bootstrap 不提供现成“修改密码表单”，需手动组合控件并实现校验逻辑；form-floating 要求严格语义结构，minlength 仅提交时校验且无法防粘贴短密码或新旧密码相同，须用 JS 实时监听比对；显示密码按钮应脱离浮动容器用栅格对齐；错误反馈需手动映射服务端状态到 is-invalid 和提示文案。
Bootstrap 本身不提供“修改密码表单”的现成组件，它只提供基础的表单控件样式和布局工具；你得自己组合 form、input、button 等元素，并手动加校验逻辑和语义结构。
用 Bootstrap 5 的 form-floating 做带标签的密码输入框
浮动标签（floating label）能让密码字段更清晰，但要注意：原生 type="password" 输入框在聚焦/失焦时标签动画依赖 value 是否为空，而用户可能填了但没触发 change——容易导致标签卡在上方不动。
- 必须给每个
input加required和id，且label的for属性要严格匹配 -
form-floating容器内不能有其他块级元素（比如p或空行），否则会破坏浮动效果 - 密码确认字段别直接复制第一个
input的id，否则 JS 校验或无障碍读屏会混乱
<div class="form-floating mb-3"> <input type="password" class="form-control" id="oldPassword" required><label for="oldPassword">当前密码</label> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="newPassword" required minlength="8"><label for="newPassword">新密码</label> </div>
为什么 type="password" 字段不能只靠 HTML minlength 校验
HTML 的 minlength 仅在表单提交时触发，且不阻止用户粘贴短密码；用户改完点“保存”才报错，体验割裂。更重要的是，旧密码和新密码不能相同——这个逻辑浏览器无法自动判断。
- 必须用 JS 监听
input或blur事件，实时比对newPassword.value和oldPassword.value - Bootstrap 5 的
is-invalid类需配合invalid-feedback元素使用，否则红框没提示文字 - 别忘了禁用提交按钮直到所有校验通过，防止重复点击：用
button.disabled = true
用 col + row 布局让“显示密码”开关对齐
密码明文切换按钮（?️）如果直接塞进 form-floating 里会破坏浮动标签定位；正确做法是脱离浮动容器，用栅格控制宽度和对齐。
- 把密码输入框和开关按钮放在同一
row，输入框占col-10，按钮占col-2 - 按钮加
btn btn-outline-secondary btn-sm并设置type="button"，避免意外触发表单提交 - JS 切换时只改
input.type（"text"↔"password"），不要删重建 DOM，否则焦点丢失
<div class="row g-2">
<div class="col-10">
<div class="form-floating">
<input type="password" class="form-control" id="newPassword"><label for="newPassword">新密码</label>
</div>
</div>
<div class="col-2 d-flex align-items-end">
<button type="button" class="btn btn-outline-secondary btn-sm">?️</button>
</div>
</div>
真正难的不是画出这个表单，而是处理前后端交互时的错误反馈——比如旧密码错误返回 401，新密码被服务端规则拒绝（含特殊字符限制、历史密码检测等），这些状态需要映射到对应字段的 is-invalid 和提示文案上，而 Bootstrap 不管这部分逻辑。
