验证失败时按钮必须设为type="button"，服务端根据是否有错误动态输出button类型；novalidate与.was-validated需配合使用；Ajax提交须调用checkValidity()；bootstrapValidator提交逻辑必须收口于success.form.bv事件。
验证失败时按钮必须设为 type="button"，不是 type="submit"
服务端验证失败后重渲染页面（比如 laravel 的 return back()->witherrors(...) 或 php 手动 echo 表单），如果提交按钮仍保留 type="submit"，用户点一下就会立刻再次提交——模态框刚弹出来，页面就刷新了，看着像“闪退”。这不是 js 没绑好，而是语义冲突。
正确做法是：由服务端决定按钮类型。验证出错时，输出的是普通触发按钮：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#errorModal">Submit</button>
验证通过时，才输出真正的提交按钮：
<button type="submit" class="btn btn-primary">Submit</button></p><p>⚠️ 容易踩的坑：</p><ul><li>前端用 JS 动态禁用/启用 <code>type="submit"</code> 按钮（如 <code>$('form').bootstrapValidator('disableSubmitButtons', false)</code>）——服务端重渲染后状态丢失，且绕过 JS 就能强行提交</li><li>模态框 HTML 被无条件渲染（哪怕没错误），导致 DOM 中存在多个同名 <code>data-bs-target</code>，行为不可控</li></ul><H3><code>novalidate</code> 属性和 <code>.was-validated</code> 类必须配合使用</H3><p>Bootstrap 5 原生表单验证依赖浏览器原生约束（<code>required</code>、<code>pattern</code> 等），但默认会在首次加载就触发提示。想让它只在提交时校验，就得加 <code>novalidate</code>；而视觉反馈（红边框/绿对勾）则靠手动加 <code>.was-validated</code> 类来激活。</p><p>示例写法：</p><pre class="brush:php;toolbar:false;"><form class="needs-validation was-validated" novalidate>
<input type="email" class="form-control" required>
<div class="invalid-feedback">请输入有效邮箱</div>
</form>⚠️ 注意：
-
.needs-validation是触发样式的基础类，不加它.invalid-feedback不显示 -
.was-validated必须在表单有验证动作后才添加（比如监听submit事件并event.preventDefault()后手动加），否则一进页面就标红 - 用 Ajax 提交时，别忘了手动调用
form.checkValidity()判断，而不是只信 CSS 类
用 bootstrapValidator 时，success.form.bv 事件才是提交入口
很多人把验证插件当成“加个红绿边框”，结果绑定 click 在按钮上发请求，导致验证通过前也能提交、或验证通过后没走回调。实际上，bootstrapValidator 的设计意图是：所有提交逻辑必须收口到 success.form.bv 事件里。
典型结构：
$('form').bootstrapValidator({...}).on('success.form.bv', function(e) {
e.preventDefault(); // 必须阻止默认 submit
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: 'POST',
success: function() { /* 处理成功 */ }
});
});⚠️ 关键细节：
- 整个
<form>内不能有第二个type="submit"按钮（比如隐藏按钮、重复的提交控件），否则bootstrapValidator会静默失效 - 不要在
success.form.bv外再写$('#submitBtn').on('click', ...)—— 验证插件不保证该回调一定执行，也不控制按钮状态 - 若需动态启用按钮（比如加载中置灰），应在
beforeSend里操作prop('disabled', true)，别碰bootstrapValidator('disableSubmitButtons')这种过时 API
服务端验证错误必须同步控制前端按钮行为
前端验证只是体验层，服务端校验才是底线。但很多项目只把错误信息塞进模态框，按钮却还是 type="submit"，用户关掉模态框后下意识再点一次，又白跑一趟请求。
真正健壮的做法是：服务端模板（PHP / Blade / Twig）根据是否有错误，直接切换按钮语义：
<?php if (has_errors()): ?> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#errorModal">提交</button> <?php else: ?> <button type="submit" class="btn btn-primary">提交</button> <?php endif; ?>
这个逻辑比任何 JS 都可靠——它不依赖客户端是否执行了某段脚本，也不怕用户禁用 JS 或反复刷新。
最常被忽略的一点：模态框本身也得按需渲染。如果服务端没错误，就别输出 <div id="errorModal"> 这段 HTML。DOM 里多一个空模态框，可能干扰 data-bs-target 的定位，也可能让某些 JS 插件误判状态。
