pattern属性仅对text类input生效，正则需避免字符类中-位置错误、禁用^$和标志位，复杂校验必须用javascript。
pattern 属性能做轻量格式校验，但只在提交时触发、不支持 ^$ 显式锚点、不能用于 type="number"，复杂逻辑必须用 JavaScript。
pattern 的正则怎么写才不会报错
浏览器对 pattern 中的正则解析比 JS 更严格，尤其字符类里 - 放错位置会直接解析失败。比如 [a-z%+-] 会被当成 “% 到 +” 的非法范围，报 Invalid character in character class。
- 把
-放到字符类开头或结尾：用[a-z._%+-]，别用[a-z%+-] - 不用
^和$—— 浏览器自动加，显式写上反而可能干扰（如^[0-9]{6}$不如[0-9]{6}稳定） - 不支持
g、i等标志，也不支持先行断言(?=...)，写了就当普通字符处理 - 中文得用 Unicode 范围：
[\u4e00-\u9fa5]{2,4}，p{Han}在 pattern 里无效
哪些 input type 能用 pattern，哪些不能
pattern 只对文本类输入生效：type="text"、type="tel"、type="email"、type="url"、type="password"、type="search"。其他类型一律忽略。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="number"完全无视pattern—— 它有自己的数值校验逻辑，想限制 6 位数字就得改用type="text" inputmode="numeric" -
type="email"自带基础校验（必须含 @、不能以 @ 开头等），pattern是增强，不是替代 - 移动端用
type="tel"比type="text"更友好，但 Safari 对中文 pattern 支持弱，慎用[\u4e00-\u9fa5]
为什么输完再点提交还报错，或者没提示
pattern 验证失败时，表单不提交，但浏览器默认提示非常简陋（比如“请与所要求的格式匹配”），且不主动高亮输入框。更麻烦的是：状态残留问题很常见。
- 用户修改内容后再次提交仍失败？因为
input.validity.valid没重置，需手动调用input.reportValidity()或监听input事件清空自定义错误 - 错误提示靠
title属性，不加title就只有默认文案；建议写具体，如title="请输入11位手机号，不要加空格或括号" - 想实时反馈（比如输错立刻标红），必须配合
setCustomValidity("")和input事件清理，否则旧错误会卡住 - 验证失败时，
input.validationMessage可读取当前提示文本，调试时可在控制台执行document.querySelector("input").checkValidity()手动触发
什么时候必须放弃 pattern，改用 JavaScript test()
pattern 适合「固定长度+简单字符集」这类静态规则。一旦涉及组合判断、上下文依赖或需要精确控制反馈时机，它就力不从心。
- 两次密码一致、邮箱和确认邮箱相同——pattern 无法跨字段校验
- 手机号要排除虚拟号段（如 170/171）、密码要检查大小写+数字+符号组合——pattern 表达能力不够
- 需要输入时实时提示（非仅提交时）、要动态禁用提交按钮、要自定义弹窗或图标——pattern 不提供 DOM 控制权
- 关键点：用
RegExp.prototype.test()，别用new RegExp(string)，避免双重转义；正则写成字面量，如/^[a-z]+@[a-z]+\.[a-z]{2,}$/i
pattern 是个好用的起点，但它的“隐式全匹配”和“无交互反馈”是硬约束。真正上线前，务必在 iOS Safari 和旧版 Android WebView 上实测中文、手机号、邮箱等高频场景——很多看似正确的 pattern，在真实设备上会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
