pattern仅对text、search、tel、url、email、password生效；需搭配required和title使用；正则不加^$和修饰符；复杂校验必须用javascript。
pattern 属性只在特定 type 下生效
不是所有 input 都能用 pattern。浏览器只对 text、search、tel、url、email、password 这六种 type 解析该属性；其他如 number、date、range 会直接忽略——因为值早已被转成数字或日期对象，正则收不到原始字符串。
常见错误写法：<input type="number" pattern="[0-9]{6}">，永远不触发校验；iOS 下还可能自动删前导零。
-
<input type="tel" pattern="1[3-9]\d{9}" required>：✅ 正确，tel保留字符串且唤起数字键盘 -
<input type="text" inputmode="numeric" pattern="[0-9]{6}" required>：✅ 兼顾移动端体验与格式控制
pattern 中的正则不能带 /^$/ 和修饰符
浏览器会自动在你写的表达式前后加上 ^ 和 $，所以你只需写核心匹配逻辑，自己加锚点或斜杠会导致失败。
错误示例：pattern="/^[0-9]{6}$/" → 斜杠被当作文本，整个变成字面量匹配；pattern="^[0-9]{6}$" → 锚点冗余，旧版 Safari 可能跳过整条规则；pattern="\d{6}" → \d 在部分旧版 Safari/IE 不被识别。
- ✅ 推荐写法：
pattern="[0-9]{6}"、pattern="[a-zA-Z0-9_]{3,16}" - ✅ 支持末尾匹配：
pattern=".*[0-9]{6}$"（如“张三 123456”） - ❌ 禁止环视：
pattern="(?=.*\d)(?=.*[a-z]).{8,}"在 Safari 14 以下直接失效
required 和 title 是 pattern 生效的硬性前提
pattern 必须搭配 required 才会触发校验。没加 required 的字段，即使输入为空或格式错误，也不会报错。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
title 是唯一可控的提示出口——它会出现在浏览器错误气泡、hover 提示、以及 input.validationMessage 中。不设 title，Chrome/Firefox 默认文案是“请与所要求的格式匹配”，用户完全不知道要输什么。
- ❌
title="格式错误"：无信息量，无法指导修正 - ✅
title="请输入6位数字，不要加空格或字母"：明确、可操作 - iOS Safari 对
title支持较弱，强提示需用 JS 的setCustomValidity()补充
复杂校验必须交给 JavaScript
pattern 天然不支持跨字段比对、动态规则、API 调用或实时反馈。它只在表单提交时触发一次，且无法访问 DOM 其他节点状态。
这些场景它完全无能为力：
- 密码与确认密码是否一致：需监听两个
input值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern无法做子串判断 - 用户名是否已存在：必须调用后端 API
- 实时高亮错误（
input或blur事件中检查）：pattern只在提交时触发
真正需要可靠控制的地方，比如千分位输入、固定前缀自动补空格、小数点和逗号共存等，都得靠 oninput + replace(/[^0-9.,]+/g, '') 这类 JS 实时干预——pattern 只是第一道防线，不是最终保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
