bootstrap 5 默认不支持手机号正则验证，需手动添加 pattern 属性或 js 校验；推荐使用 pattern="^1[3-9]\d{9}$" 配合 title 提示，避免用 \b 或 \s，并注意转义与实时清理非数字字符。
Bootstrap 5 默认不内置手机号正则验证
Bootstrap 自身的表单验证（form-control + is-valid/is-invalid）只处理 required、email、url 等原生类型，对手机号这种中国特有格式，必须手动加 pattern 属性或 JS 校验。直接写 type="tel" 没用——浏览器不会按中国规则校验。
推荐用 pattern 配合 title 提示
在 <input> 上加 pattern 是最轻量、无需 JS 就能触发 Bootstrap 可视反馈的方式。注意：正则要写在属性值里，且需转义反斜杠。
常用中国手机号正则（11位、以1开头、第二位是3-9）：
<input type="text" class="form-control" pattern="^1[3-9]\d{9}$" title="请输入正确的11位手机号" required>
-
^1[3-9]\d{9}$覆盖目前主流号段（13x/14x/15x/17x/18x/19x），比^1\d{10}$更严谨 - 不要用
\b或\s——pattern默认是全字符串匹配，加了反而失效 -
title内容会作为浏览器默认提示文案，务必写清楚，否则用户只看到“无效值” - 如果允许带空格或横线（如
138 1234 5678），就别用pattern，改用 JS 去掉非数字再校验
JS 手动触发验证时注意 checkValidity() 和 setCustomValidity()
当需要动态校验（比如失焦、提交前），不能只靠 pattern，得用 JS 控制状态。关键点：
- 调用
input.checkValidity()会触发原生校验逻辑，包括pattern，返回true/false - 若要自定义错误信息（比如后端返回“该号码已注册”），必须先调
input.setCustomValidity("错误文案")，再调input.reportValidity() - 校验通过后，一定要执行
input.setCustomValidity("")清空自定义错误，否则后续checkValidity()一直返回false - Bootstrap 的
is-valid/is-invalid类不会自动同步，得自己根据结果增删
别忽略输入法和粘贴场景
用户可能用中文输入法打数字、或直接粘贴带括号/空格的号码（如 (138) 1234-5678）。纯 pattern 会直接报错，体验差。
- 建议监听
input事件，用input.value = input.value.replace(/[^\d]/g, "")实时清理非数字字符 - 但注意：清理后要重置
setCustomValidity("")，否则残留错误态 - 如果要做带格式的展示（如
138****5678），必须分离「显示值」和「提交值」，用隐藏域存清洗后的 11 位数字
真正麻烦的不是正则本身，而是怎么让验证既准又不打断用户输入节奏——尤其在移动端，软键盘切换、长按粘贴、输入法候选栏都可能绕过你的正则边界。
