placeholder仅是视觉提示，真正约束输入的是pattern属性；需配合title提供明确错误提示，且pattern正则须完整匹配（隐式^$）、正确转义，移动端需js兜底校验。
placeholder 只负责提示，pattern 才真正约束输入
很多人以为写个 placeholder="xxx-xx-xx" 就能引导用户按格式输，其实它只是视觉提示，提交时完全不校验。真正起约束作用的是 pattern 属性，配合 title 提示错误原因，才能让浏览器在提交前拦截非法输入。
常见错误是只设 pattern 却漏掉 title，结果用户输错后只看到模糊的“请与所要求的格式匹配”，根本不知道该填什么。正确做法是：pattern 定义正则，title 写人话说明。
-
pattern值必须匹配整个输入值（隐式加 ^ 和 $），比如手机号要写pattern="[0-9]{11}"，不能只写[0-9]{11} - 中文字符、括号、斜杠等需在正则中转义，例如身份证号末位可能是
X或x，得写成pattern="[0-9]{17}[0-9Xx]" - 移动端 Safari 对
pattern支持较弱，部分机型提交时不触发校验，务必额外用 JS 补充验证
用 placeholder 模拟遮罩效果，但别依赖它做格式控制
想实现像 “(123) 456-7890” 这样的实时遮罩，placeholder 本身做不到——它只是静态文本，无法随输入动态更新。真要遮罩，得靠 JS 监听 input 事件并手动格式化 value，同时防止光标跳位。
不过 placeholder 可以辅助降低认知成本：比如电话输入框写 placeholder="( ) -____"，用空格和符号暗示结构；日期写 placeholder="YYYY-MM-DD"，比纯文字更直观。
- 避免在
placeholder里塞真实数据（如placeholder="例：13812345678"），容易被误当成已填内容 - placeholder 文本不会触发
required校验，哪怕看起来像填了，留空仍会报错 - 某些屏幕阅读器会把 placeholder 当作标签读出，所以内容要简洁明确，别写“请输入您的手机号（11位数字）”这种冗余描述
pattern 正则写错会导致表单完全无法提交
一个常见的坑：正则语法错误或边界没处理好，会让整个表单卡死——用户无论输什么都提示“请与所要求的格式匹配”，连空格、退格都失效。比如写 pattern="d{3}-d{4}"，反斜杠在 HTML 属性里会被解析为普通字符，实际传给浏览器的是 d{3}-d{4}，根本不是数字匹配。
正确写法是双反斜杠：pattern="\d{3}-\d{4}"，或者改用字符组：pattern="[0-9]{3}-[0-9]{4}" 更稳妥。
- 测试时务必用非法输入（如少一位、多一位、带字母）触发校验，别只测“看起来对”的情况
- 如果允许可选部分（如区号带括号），正则要写成
pattern="\(?[0-9]{3}\)?[-\s]?[0-9]{3}[-\s]?[0-9]{4}"，注意括号和连字符都要转义 - pattern 不校验空值，所以
required和pattern要搭配使用，否则用户直接提交空字符串也能过
移动端输入类型与 pattern 的兼容性差异大
在 iOS 上，type="tel" 会唤起数字键盘，但 pattern 几乎不生效；Android Chrome 则对 pattern 支持较好，但 type="number" 会禁止输入连字符和括号，反而破坏格式需求。
所以真实项目里，更可靠的做法是：用 type="text" 配合 inputmode="numeric"（iOS/Android 都支持）唤起数字键盘，再靠 pattern + JS 双保险校验。
-
inputmode="tel"在部分 Android 机型上会唤起带 *# 键的键盘，不适合纯数字场景 - 不要指望
pattern自动过滤非法字符——它只在提交时校验，用户依然能输入任意内容，得靠 JS 的input事件实时清理 - 微信内置浏览器对
pattern支持极差，必须用 JS 兜底，否则表单形同虚设
实际遮罩逻辑远比 placeholder + pattern 组合复杂，尤其是光标位置维护和删除逻辑。很多团队最后都转向成熟的库（如 imask 或 cleave.js），因为手写容易在退格、粘贴、选中替换等边缘场景出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
