pattern在type="number"上完全无效，应改用type="text"配合inputmode="numeric"；正则需双写反斜杠如d{6}，必须设置具体title提示，且仅在原生submit或reportvalidity()中触发校验。

pattern在type="number"上完全不生效，别硬写

浏览器规范强制要求忽略 type="number" 的 pattern，写了也白写。用户输“12.34”“-5”“123456789012”全都能过，提交时零提示。

常见翻车写法：<input type="number" pattern="[0-9]{6}">

• 改用 type="text" inputmode="numeric"：保留数字键盘（Android/iOS 均支持），同时让 pattern 生效
• 若需数值语义（如表单序列化后自动转数字），JS 层用 parseInt(input.value) 转换，别依赖 type
• 位数限制（如 6 位验证码）必须靠 pattern="d{6}" + title，min/max 对位数无效

正则写法错一个字符就静默失效

pattern 是裸字符串，不是 JS 正则字面量。加 /、漏双反斜杠、错放 -，都会导致匹配逻辑崩坏，且无报错提示。

典型错误：pattern="/^d{6}$/" 或 pattern="d{6}"

• d 必须写成 d（HTML 属性中反斜杠要双写，即 \d）；[0-9] 更稳妥，兼容所有浏览器
• 字符类中 - 必须放开头或结尾，[a-z-] ✅，[a-z-_] ❌（中间的 - 被解析为范围符）
• 中文匹配写 [u4e00-u9fa5]，注意 HTML 里 u 不用双写，但 s w 等需双写为 \s \w
• 锚点 ^ $ 可省略——浏览器自动加，但显式写出更易读、防误解

没设title，等于没写pattern

Chrome/Firefox/Safari 都只把 title 内容当错误提示文案。不设 title，失败时只显示“请与所要求的格式匹配”，用户根本不知道要输什么。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

空 title="" 也不行，会 fallback 到默认模糊提示。

• title 必须写具体约束，比如 title="请输入6位纯数字，不要加空格"，不是 title="格式错误"
• iOS Safari 对 title hover 提示支持弱，关键字段建议用 JS 补充 setCustomValidity() 控制 validationMessage
• required 和 pattern 共存时，空值触发 required 提示，非空不匹配才走 pattern + title

旧浏览器或复杂校验必须用JS接管

IE 完全不支持 pattern；Safari 15.4 之前不支持环视（(?=.*d)）；所有浏览器都不支持 Unicode 属性类（p{L}）。

一旦需要以下任一能力，pattern 就该退场：

• 实时反馈（输入时标红/显示强度条）→ 监听 input 事件 + checkValidity()
• 异步校验（用户名是否已存在）→ fetch + setCustomValidity()
• 多字段联动（密码与确认密码一致）→ 手动比对 + reportValidity()
• 绕过验证（如临时禁用某字段）→ input.removeAttribute('pattern') 或设 pattern=".*"，别用 setCustomValidity('') 打补丁

最易被忽略的一点：pattern 校验只在原生 submit 事件或 form.reportValidity() 中触发。用 button onclick 或 AJAX 提交时，它根本不会跑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！