pattern属性仅在表单提交时触发验证，不监听实时输入；需配合input事件和setcustomvalidity()实现即时校验，且正则须全串匹配、首尾锚定，搭配inputmode="tel"可优化移动端键盘体验。
pattern 属性只在提交时触发，不监听实时输入
很多人以为给 <input> 加上 pattern 就能像 JS 那样每敲一个字符就校验，其实不是。pattern 是表单原生验证机制的一部分，只在调用 form.reportValidity() 或用户点击 type="submit" 按钮提交时才真正生效。输入过程中不会自动提示错误，也不会阻止非法字符输入。
这意味着：如果你依赖纯 HTML 实现“输错立刻标红”，必须配合 input 事件 + setCustomValidity() 手动干预，或者用 JS 监听并动态更新 validity 状态。
-
pattern的正则匹配的是整个字段值（即input.value全串），不是子串匹配 - 空字符串默认通过验证（除非加
required） - 浏览器内置提示文案不可定制，不同浏览器显示位置/样式不一致（Chrome 在底部，Safari 在输入框上方）
手机号 pattern 正则怎么写才靠谱
中国大陆手机号最常见的是 11 位、以 1 开头、第二位是 3–9，但仅靠 ^1[3-9]\d{9}$ 会漏掉部分号段（比如 170/171/166/198/199 等虚拟运营商号段），也会误拦某些合法新号段（如 14 号段已逐步开放）。更稳妥的做法是放宽前三位范围，再结合业务实际约束。
推荐用这个：^1[3-9]\d{9}$ 作为基础，若需兼容更多号段，可扩展为：^1([3-9]\d|4[0-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-9])\d{8}$ —— 但这已超出 pattern 可读性边界，维护成本高。
- 别用
\s、\D这类模糊字符类，pattern 对 Unicode 支持有限，容易跨浏览器行为不一致 - 开头必须加
^，结尾必须加$，否则123abc456这种也会通过 - 不要在 pattern 中写注释或忽略模式标志（
/.../g这种 JS 写法完全无效）
为什么 inputmode="tel" 和 pattern 要搭配使用
inputmode="tel" 不影响验证逻辑，但它会触发移动端数字键盘（带 * # 键），提升输入体验；而 pattern 决定是否通过校验。两者分工明确，缺一不可。
单独用 inputmode="tel"：键盘友好，但无法阻止用户粘贴字母；单独用 pattern：能校验，但用户仍可能调出全键盘输入字母。
- Android Chrome 下，
inputmode="tel"+type="text"比type="tel"更可靠（后者某些版本会绕过 pattern 校验） - iOS Safari 对
inputmode支持较晚（iOS 16.4+），旧版本 fallback 用type="tel"更稳妥 - 避免同时设
type="tel"和pattern后又用 JS 绑定keypress拦截——容易冲突导致输入卡顿
提交失败时如何让错误信息更友好
原生 title 属性是唯一能自定义 pattern 提示文案的方式，但它只在验证失败时作为 tooltip 显示，且无法控制出现时机和样式。例如：<input pattern="^1[3-9]\d{9}$" title="请输入正确的11位手机号">。
但要注意：title 值不会自动翻译，也不支持 HTML 标签，更不能响应式适配屏幕宽度。如果需要精确控制提示位置、颜色或动效，必须用 JS 拦截 invalid 事件，手动插入提示元素。
- 不要把
title当成 placeholder 用，它和 placeholder 完全无关 - 部分屏幕阅读器会读出
title，所以文案要简洁明确，避免“请”“谢谢”等冗余词 - 如果用了
novalidate属性，所有原生验证（包括 pattern）都会失效，title 也不再显示
pattern 的边界很清晰：它只是提交前一道轻量级守门员，不是输入过滤器，也不是 UI 控制器。想做到输入即校验、错误即反馈、提示即统一，终究得靠 JS 补位。别指望一行 pattern 解决所有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
