type="email"仅做基础校验，无法处理空格、连续点号等无效格式，且Bootstrap不提供额外验证逻辑；需配合pattern属性、JS手动校验及后端等价验证确保安全。
为什么 type="email" 不够用
浏览器原生的 type="email" 会触发基础格式校验（比如必须含 @ 符号），但无法拦截空格、连续点号（user..name@example.com）、或本地部分过长等无效邮箱。更关键的是，Bootstrap 本身不提供额外邮箱正则逻辑——它只负责样式和表单控件的视觉反馈，验证逻辑得你来补。
用 pattern 属性做轻量级前端校验
在 Bootstrap 表单控件上加 pattern 是最直接的方式，配合 title 提示用户格式要求。注意：这个正则不能太激进，否则会误拒合法邮箱（比如带 + 号的 Gmail 地址）。
推荐用这个宽松但实用的模式：
<input type="email" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效的邮箱地址" required>
-
pattern值必须是纯字符串，不要加/.../斜杠 - Bootstrap 的
.is-invalid样式会自动在:invalid状态下生效，前提是元素有required或已失焦且值不匹配 - 移动端 Safari 对
pattern支持有限，建议搭配 JS 做兜底
用 JavaScript 手动触发验证并显示错误
当需要更精细控制（比如提交前统一校验、或动态提示），别依赖 checkValidity() 默认行为——Bootstrap 的 .form-control 需要手动添加 .is-invalid 和配套的 <div class="invalid-feedback">。
<p>示例代码片段：</p>
<pre class='brush:php;toolbar:false;'>const emailInput = document.querySelector('#email');
const feedback = document.querySelector('#email-feedback');
emailInput.addEventListener('blur', () => {
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value.trim());
emailInput.classList.toggle('is-invalid', !isValid);
feedback.textContent = isValid ? '' : '邮箱格式不正确';
});</pre>
<ul>
<li>正则用 <code>^[^\s@]+@[^\s@]+\.[^\s@]+$ 比 HTML pattern 更易读，且过滤了首尾空格
.trim()，否则 user@example.com 会被当成有效submit，用户需要即时反馈，blur 或 input 更合适后端才是最终防线，前端验证只是体验优化
所有前端校验都能被绕过。如果你在提交时只依赖 pattern 或 JS 正则，而服务端没做等价校验（比如用 Python 的 email-validator 库，或 Node.js 的 validator.isEmail()），那邮箱字段就等于没设防。
容易被忽略的一点：type="email" 在某些旧版 Android 浏览器中会强制弹出数字键盘，反而影响输入。如果发现用户投诉输入困难，宁可回退到 type="text" + 完整 JS 校验，也别为“语义化”牺牲可用性。
