必须调用event.preventdefault()阻止表单默认提交，否则页面刷新；提交后需手动reset()清空表单；ajax失败要显示错误提示；校验需手动同步.is-valid/.is-invalid样式。
模态框里表单提交后页面跳转或刷新了
Bootstrap 模态框（Modal）本身不干预表单行为，一旦里面放了 <form></form> 且没阻止默认提交，浏览器就会按原生逻辑发送请求、刷新整个页面——这显然不是你想要的“在模态框里完成提交并保持弹窗状态或仅局部更新”的效果。
关键动作是显式调用 event.preventDefault()，否则所有后续 JS 处理（比如 AJAX 提交、校验、关闭模态框）都来不及执行。
- 必须给表单绑定
submit事件监听，不能只监听按钮的click - 如果用了 Bootstrap 5+，注意
data-bs-toggle="modal"不会自动绑定表单逻辑，它只管打开/关闭 - 常见错误：在按钮上写
onclick="submitForm()"却没对<form></form>阻止默认行为，结果双提交（一次 JS、一次原生）
$('#myModal form').on('submit', function (e) {
e.preventDefault(); // 这行不能少
const formData = $(this).serialize();
$.post('/api/save', formData).done(() => {
$('#myModal').modal('hide');
});
});
关闭模态框后表单数据没清空
Bootstrap 的 modal('hide') 只隐藏 DOM，不重置表单字段。用户第二次打开时看到的还是上次填的内容，甚至可能误提交旧数据。
重置时机很关键：不能在 hide 之后再清空（此时模态框已不可见，但 DOM 还在），更不能在 hidden.bs.modal 事件里清空——那会清掉所有字段，包括你可能想保留的默认值或编辑态回填项。
- 推荐在用户点击“保存”成功后、调用
modal('hide')前手动重置：$(form)[0].reset() - 避免用
$('input').val('')全局清空，它会干掉select的选中状态和checkbox的勾选 - 如果表单含动态渲染内容（如通过 JS 添加的字段），
reset()不起作用，得手动清理对应变量或 DOM
AJAX 提交失败时模态框卡住没反馈
网络错误、400/500 响应、后端校验失败……这些情况如果没做 UI 层反馈，用户会以为“点了但没反应”，反复点击，甚至怀疑按钮坏了。
模态框本身不提供错误提示能力，必须自己加 <div class="invalid-feedback"> 或临时插入提示文案，且要和字段强绑定。
<ul>
<li>后端返回的错误字段名要和表单 <code>name 属性一致，才好精准定位：{ "email": ["邮箱已被注册"] }
console.error，用户看不到；也别只用 alert()，破坏体验$btn.prop('disabled', true)，防止重复提交；失败后记得恢复.is-invalid 类需配合 .form-control 才生效，直接加在 div 上无效模态框内表单校验与 Bootstrap 验证样式不联动
Bootstrap 自带的 required、pattern 等 HTML5 属性触发的是浏览器原生校验（带气泡提示），和它的 CSS 类 .is-valid/.is-invalid 是两套体系——不手动同步，样式就不会变。
也就是说，即使你用 JS 调用了 checkValidity()，也不会自动加类；反过来，手动加了 .is-invalid，也不代表浏览器校验通过了。
- 校验通过后，手动加
.is-valid并移除.is-invalid；失败则反之 - 对
input、select、textarea都要单独处理，fieldset或容器元素加类无效 - 如果用了第三方校验库（如 jQuery Validation），注意它默认不操作 Bootstrap 的校验类，需在
success/errorPlacement里补上
