pattern属性仅在表单提交或调用checkValidity()时触发校验，不拦截输入、不实时反馈；正则默认全字符串匹配，错误提示依赖title且移动端支持弱，后端必须重复验证。

pattern 属性只在表单提交时触发校验，不拦截输入、不实时反馈，这点必须先确认清楚。

pattern 属性的真实行为

很多人误以为给 <input pattern="..."> 加了正则，用户一输错就会立刻标红或阻止。事实是：pattern 仅在调用 checkValidity() 或原生表单提交（比如点 <button type="submit">）时才生效。输入过程中完全无反应。

• 正则默认被浏览器自动加上 ^ 和 $ 锚定，写 pattern="[0-9]{5}" 等价于匹配“整个字符串恰好是 5 位数字”，不用手写 ^$
• 错误提示文案不可定制，取决于浏览器语言环境（如 Chrome 中文版显示“请输入符合指定格式的值”）
• 若同时有 required 且输入为空，优先报“请填写此字段”，不会显示 pattern 的错误
• 移动端软键盘类型不会因 pattern 自动切换——pattern="\d+" 不会让 iOS 弹出数字键盘

想实时限制输入，必须用 JavaScript 监听 oninput

要真正“挡住非法字符”，得靠 JS 在输入流中过滤。常见写法是：

<input oninput="this.value = this.value.replace(/[^0-9]/g, '')">

但要注意几个坑：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 直接用 replace() 会破坏光标位置，用户在中间插入字符后，光标可能跳到末尾
• 粘贴（Ctrl+V）、拖放、右键粘贴等操作，oninput 有时捕获不全，尤其 Safari 对富文本拖放支持不稳定
• 负数、小数点、千分位逗号等需求，不能简单套用 /[^0-9]/g，得按实际语义设计字符集，比如允许小数点就写 /[^0-9.]/g，但还要额外处理“多个点”“点开头”等逻辑
• onkeyup 比 oninput 更滞后（松开键才触发），且无法捕获粘贴和语音输入，已不推荐

为什么 type="number" 经常失效

它只是语义化标记，并非可靠输入控制手段：

• 桌面 Chrome/Firefox：支持上下箭头，但允许粘贴带单位的字符串（如 "12px"）
• Safari 和多数移动端：允许任意字符输入，只在提交时校验；长按仍可唤出全键盘（含字母键）
• 无法阻止手动输入 -5 或 3.14，即使设了 min="0" step="1"
• 无障碍问题明显：屏幕阅读器读作“数字字段”，但用户实际能输字母，造成预期断裂

安全边界在哪？后端永远要重验

pattern 和前端 JS 过滤都只是体验层优化。用户禁用 JS、绕过 HTML、用 Postman 直接发请求，所有前端限制形同虚设。真正可靠的校验必须落在后端——包括长度、格式、范围、业务规则（如手机号是否已注册）。前端做的越细，只是让用户少点几次“提交失败”的挫败感而已。