Bootstrap 5 表单需显式添加 novalidate 并用 JS 控制验证：保留 required 等语义属性，配合 checkValidity()、is-invalid 类和 invalid-feedback 元素实现自定义提示，复杂逻辑用 setCustomValidity()，同时注重无障碍支持。
Bootstrap 5 的 form-control 默认不触发 HTML5 验证，得手动加 novalidate 和 JS 控制
直接写 <input required> 在 Bootstrap 表单里不会弹出浏览器默认提示——因为 Bootstrap 5 的 form-control 样式会覆盖部分原生验证 UI，且官方示例普遍加了 novalidate 属性来禁用原生行为，把控制权交给 JS。所以光靠属性写不全验证逻辑。
正确做法是：保留 required、type="email" 等语义化属性（用于基础校验和无障碍），显式添加 novalidate 到 <form></form>，再用 JS 监听 submit 事件做自定义反馈：
<form novalidate>
<div class="mb-3">
<label class="form-label">邮箱</label>
<input type="email" class="form-control" name="email" required>
<div class="invalid-feedback">请输入有效邮箱</div>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
- 必须给每个必填/格式字段配一个
<div class="invalid-feedback">，否则错误提示不显示 <li>Bootstrap 只负责样式（如红框、文字变红、<code>invalid-feedback显示），不自动绑定验证逻辑 -
novalidate是关键：没它，表单可能在 JS 运行前就提交或弹出原生气泡，干扰体验
用 checkValidity() + addClass('is-invalid') 触发 Bootstrap 样式
Bootstrap 不提供验证函数，得调浏览器原生 API 判断，再手动加类控制样式。常见错误是只调 checkValidity() 却忘了更新 UI 状态。
推荐在表单 submit 事件中统一处理：
document.querySelector('form').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
// 找到所有无效字段，加 is-invalid 类
this.querySelectorAll(':invalid').forEach(el => {
el.classList.add('is-invalid');
el.nextElementSibling?.classList.add('d-block'); // 显示 invalid-feedback
});
}
});
-
:invalid伪类能精准选中当前不满足required、type="email"等规则的元素 - 只加
is-invalid不够，invalid-feedback默认display: none，得手动设d-block或用show类 - 别对整个表单用
addClass('was-validated')——这会让所有:invalid元素立刻显示错误态，包括用户还没输过的空字段
密码二次确认这类自定义规则，得用 setCustomValidity()
HTML5 原生验证只管格式和必填，像“两次输入密码一致”这种业务逻辑，必须手写 JS 并调 setCustomValidity() 注入错误信息。
例如密码确认字段：
const pwd = document.querySelector('[name="password"]');
const pwdConfirm = document.querySelector('[name="confirm_password"]');
pwdConfirm.addEventListener('input', () => {
if (pwd.value !== pwdConfirm.value) {
pwdConfirm.setCustomValidity('两次输入不一致');
} else {
pwdConfirm.setCustomValidity('');
}
});
- 只要
setCustomValidity('xxx')传非空字符串，该字段就视为:invalid，Bootstrap 的is-invalid就能生效 - 必须在每次输入后重置（传空字符串），否则即使输对了也一直报错
- 注意：这个 API 不触发
invalid事件，所以不能依赖它做全局监听，得单独处理反馈显示
移动端键盘类型和无障碍支持不能只靠 type
用 type="email" 或 type="password" 不仅为了验证，更是为了唤起对应软键盘、支持屏幕阅读器。但容易忽略两点：
- 手机号登录场景下，
type="tel"比type="text"更合适——唤出数字键盘，且不会触发邮箱格式校验 - 所有
<input>必须有明确<label></label>（用for/id关联或包裹），否则屏幕阅读器无法读出字段用途 - 如果用浮动标签（
form-floating），确保<label></label>写在<input>后面，否则焦点时标签动画异常
验证逻辑越复杂，越要回归基础：语义化属性、可访问性标记、渐进增强。Bootstrap 只是皮肤，内核还得靠原生机制撑住。
