推荐用 type="text" + pattern，如 pattern="^1[3-9]\d{9}$" 并配 title 提示；需用 reportValidity() 触发原生提示，提交前加 was-validated 类激活 Bootstrap 样式；JS 补充校验宜先判长度再判号段。
手机号验证该用 type="tel" 还是 type="text"
直接用 type="tel" 不能真正校验格式，它只触发系统软键盘数字布局，且浏览器不强制校验内容。真要验证，必须配合 pattern 属性或 JavaScript。推荐用 type="text" + pattern，避免 type="tel" 在部分安卓浏览器中绕过正则校验。
-
pattern值需写成符合中国手机号的正则，例如^1[3-9]\d{9}$（覆盖 13–19 开头的 11 位号） - 加上
title属性，提示用户格式要求，否则浏览器默认提示语不明确 - 别依赖
required单独存在——它只判空，不防 “123” 或 “138abcd” 这类非法输入
Bootstrap 5 中如何让 pattern 错误提示显示出来
Bootstrap 5 默认不接管原生 pattern 的验证气泡，需手动触发 checkValidity() 或监听 submit 事件。最简方式是在表单 submit 时调用 reportValidity()：
document.getElementById('myForm').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
this.reportValidity(); // 弹出原生提示，含 title 内容
}
});
- 不调用
reportValidity()，仅靠pattern+title在某些 Chrome 版本下静默失败 - 如果用了 Bootstrap 的
.was-validated类，需在提交前手动添加：this.classList.add('was-validated')，否则:invalid样式不生效 - 注意：iOS Safari 对
pattern支持较弱，建议 JS 层再补一次校验
用 JavaScript 补充验证时，正则怎么写才靠谱
别直接抄网上“匹配所有手机号”的长正则——运营商号段常更新，过度复杂反而难维护。生产环境建议分两步：长度 + 号段前缀校验。
- 先用
value.length === 11快速过滤明显错误 - 再用
/^1[3-9]\d{9}$/.test(value)判结构，它比^1[3-9][0-9]{9}$更简洁且等价 - 若需兼容带区号或短号（如 95xxx），应单独字段处理，不要混进手机号输入框
- 实时验证建议节流（如 300ms 延迟），避免每敲一个键都触发正则匹配
为什么加了 is-invalid 类但红框没出现
因为 Bootstrap 的 .is-invalid 是纯样式类，不会自动根据输入内容切换。它只响应你手动添加/移除这个 class，或依赖 :invalid 伪类（前提是表单已进入 was-validated 状态）。
- 手动控制：校验失败时
input.classList.add('is-invalid')，成功时remove - 自动控制：确保表单有
novalidate属性，并在首次提交后加was-validated类，此时input:invalid才会匹配.form-control.is-invalid规则 - 常见漏点：忘了给
input加id，导致关联的<div class="invalid-feedback"> 无法被 aria-describedby 正确绑定 实际项目里，最易忽略的是 iOS Safari 的 pattern 兼容性，以及 <code>was-validated类的触发时机——它不是页面加载就该有，而是用户交互后才加。
