正确做法是移除data-bs-dismiss，用classlist控制d-none显隐并配合fade.show实现淡入动画，手动绑定关闭事件，submit时先隐藏再显示以重置动画，禁用原生验证并统一处理提示文案与无障碍支持。
表单提交后用 JavaScript 控制 alert 显示，别依赖 data-bs-dismiss
Bootstrap 的 .alert 默认关闭按钮带 data-bs-dismiss="alert"，点击后会直接从 DOM 中移除整个元素——这意味着你下次想再显示它，document.querySelector('.alert') 会返回 null，JS 操作彻底失效。
正确做法是：移除 data-bs-dismiss，改用纯 CSS 类控制显隐：
- HTML 中保留
.alert-dismissible（它只负责预留右侧 padding，不影响逻辑） - 关闭按钮只保留
class="btn-close"，去掉data-bs-dismiss="alert" - 用
classList.add('d-none')/classList.remove('d-none')控制开关 - 加上
.fade.show可保淡入动画，但注意：首次显示时必须有.show，否则不触发动画
fetch 成功后手动显示提示框，记得重置状态
常见错误是只做 myAlert.classList.remove('d-none')，但没处理「再次提交时提示框还开着」或「用户手动点关闭后状态未同步」的问题。
推荐结构：
const myAlert = document.querySelector('.my-alert');
const closeBtn = myAlert.querySelector('.btn-close');
// 手动绑定关闭
closeBtn.addEventListener('click', () => {
myAlert.classList.add('d-none');
});
form.addEventListener('submit', e => {
e.preventDefault();
fetch('/api/submit', { method: 'POST', body: new FormData(form) })
.then(() => {
// 先隐藏（防重复显示），再显示
myAlert.classList.add('d-none');
void myAlert.offsetWidth; // 强制重排，确保 transition 重置
myAlert.classList.remove('d-none');
form.reset();
});
});
避免和原生表单验证提示打架
如果表单用了 required 或 pattern，浏览器会在字段失焦时弹原生气泡提示（比如「请填写此字段」），它和你的 .alert 是两套机制，互不感知。
要统一体验，得主动接管验证：
- 给
<form></form>加novalidate属性，禁用原生校验弹窗 - 在 submit 事件里用
form.checkValidity()判断，失败时手动加.is-invalid和.invalid-feedback - 成功后才触发
.alert显示，避免「校验失败提示 + 成功提示」同时出现
提示框内容动态化，别写死在 HTML 里
硬编码 <div class="alert">提交成功！</div> 无法适配不同接口响应（比如「订单已创建」vs「邮箱已验证」）。
更灵活的做法：
- 把提示文案存在
data-message属性里：<div class="alert" data-message="操作成功"> <li>或在 JS 里根据 response 解析出 <code>message字段，再填入myAlert.querySelector('strong').textContent = res.message - 如果后端没返回 message，至少 fallback 到默认文案，别留空
真正容易被忽略的不是怎么显示，而是「提示框消失后，用户是否还能看到它曾存在过」——比如快速连续提交两次，第二次提示可能被第一次的动画残留干扰；或者屏幕阅读器用户依赖 role="alert" 捕获变化，这个属性不能漏。
