pattern属性仅在submit或手动调用checkValidity()/reportValidity()时执行校验，不监听input/blur事件；仅text、search、tel、url、email、password六种type支持，number/date等类型静默忽略；必须配合required且正则锚定^$，title为错误提示唯一出口，实时反馈需JS补位。
pattern 属性本身不控制触发时机——它只在表单提交（submit 事件）或手动调用 checkValidity()/reportValidity() 时才真正执行校验。所谓“输入即校验”“失焦就报错”，全是假象，浏览器原生不支持。
为什么点提交才校验，而不是输错立刻拦？
浏览器把 pattern 当作一个纯字符串规则，内部自动加 ^ 和 $ 做全串匹配，但校验引擎只挂载在表单提交流程里。它不监听 input、blur 或 change 事件，也不干预用户输入过程。
常见误解场景：
- 写了
pattern="[0-9]{6}"却发现用户能随便输字母——因为没提交，校验根本没跑 - 加了
required但空值仍通过——pattern对空字符串默认视为匹配成功（除非正则明确排除空，如.+） - 用
type="number"配pattern——完全失效，浏览器直接忽略该属性
哪些 type 支持 pattern？哪些会静默失效？
只有六种文本类 type 有效：text、search、tel、url、email、password。
以下类型一律忽略 pattern：
-
type="number"：数值解析优先，原始字符串进不去正则引擎 -
type="date"、type="range"、type="checkbox"：类型逻辑与字符串校验无关 -
type="tel"✅ 是安全选择：保留字符串、唤起数字键盘、支持pattern - 想兼顾移动端数字输入又需要格式控制？用
type="text" inputmode="numeric"替代number
title 属性不是可选，而是错误提示的唯一出口
没写 title，Chrome 显示“请与所要求的格式匹配”，Safari 可能根本不弹气泡——用户看到的只是个红框，不知道哪里错了。
实操要点：
-
title文案必须具体，比如title="请输入11位手机号，不要加空格或括号"，别写“格式错误” - 移动端 Safari 对
title支持弱，iOS 用户大概率看不到提示，必须用 JS 补充setCustomValidity() - 调试时可直接在控制台运行
document.querySelector("input").validationMessage查看实际提示内容
想实时反馈？pattern 自己做不到，JS 必须补位
所谓“输错立刻标红”“边输边提示”，pattern 天然不提供。你得自己监听 input 事件，并手动管理状态：
- 每次输入后调用
input.checkValidity()判断是否匹配 - 失败时调用
input.setCustomValidity("自定义提示")，成功时必须清空：input.setCustomValidity("") - 状态残留是高频坑：用户改完内容再提交仍报旧错，因为
input.validity.valid不自动刷新 - 复杂逻辑（如密码强度含大小写+数字+特殊字符）慎用环视
(?=.*[a-z])，旧版 Safari 会静默失效
最常被忽略的一点：pattern 的正则写法是裸字符串，不能带首尾 /，[a-z-_] 这种写法在短横位置不对时直接失效，而且毫无报错提示——浏览器只默默跳过校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
