pattern仅对text、search、tel、url、email、password六种type生效；type为number或date时pattern被忽略；需配合required和title使用，且正则不加/^$/；复杂校验必须用javascript。
pattern属性只对特定type生效，别乱配number或date
写<input type="number" pattern="[0-9]{6}">永远不触发校验——浏览器把输入转成数字后，正则根本收不到原始字符串。pattern仅在text、search、tel、url、email、password这六种类型下有效。
常见错误场景：
-
type="date"或type="range"加pattern：完全被忽略 -
type="tel"配pattern="1[3-9]\d{9}"：✅ 正确，保留字符串且唤起数字键盘 -
type="text" inputmode="numeric" pattern="[0-9]{6}"：✅ 兼顾移动端体验与格式控制
正则写法必须“裸字符串”，别带/^$/或i标志
浏览器内部用new RegExp(pattern, 'u')编译，并自动锚定全串（即等效于^pattern$）。你写pattern="[0-9]{6}"就足够了，加^或$反而冗余，旧版Safari可能直接跳过整条规则。
容易踩的坑：
-
pattern="/^[0-9]{6}$/"：斜杠被当作文本，整个表达式字面匹配，永远失败 -
pattern="d{8}"：缺反斜杠，解析为字面量d{8}，不是数字 -
pattern="[a-z-_]"：连字符-不在字符类首尾，会被当成非法Unicode范围，正则失效
没required + 没title = 白写pattern
pattern默认允许空值通过。用户不输内容，校验就“成功”了。必须加required才能让空值也被拦住。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
title不是可选项，它是唯一可控的提示出口：
- 没设
title，Chrome/Firefox报错文案是“请与所要求的格式匹配”，用户不知道要输什么 -
title="请输入6位数字，不要加空格或字母"比title="格式错误"有用十倍 - iOS Safari对
title支持弱，若需强提示，得用JS的setCustomValidity()补充
复杂逻辑必须交给JavaScript，pattern只是第一道筛子
pattern不支持零宽断言、捕获组、全局标志等高级特性。像“密码需含大小写字母+数字+符号”或“两次输入密码一致”这类跨字段、带语义的校验，它根本做不到。
真实开发中该怎么做：
- 用pattern做快速拦截：比如
pattern="[a-zA-Z][a-zA-Z0-9_]{3,15}"控用户名格式 - 用JS监听
blur或input事件做实时反馈，调用setCustomValidity()设具体错误 - 提交前统一调用
form.checkValidity()，失败时form.reportValidity()触发原生提示 - 后端必须重复校验——前端pattern只是体验优化，不能替代服务端验证
真正容易被忽略的是：pattern的生效时机只在表单提交或显式调用checkValidity()时触发；日常输入过程里它不报错、不拦截、不提醒——这点和JS实时校验完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
