真正可靠的准确性永远建立在后端完整校验之上——前端的placeholder、pattern、inputmode和JS校验仅为友好拦截，均可能被绕过或失效。
直接给输入框加 placeholder 或 title 不等于提高了准确性——它们只是辅助提示，真正起作用的是 pattern、type 和 JS 校验的组合。单靠视觉提示反而容易让用户误以为“填对了”。
为什么 placeholder 不能当格式引导用
placeholder 是纯视觉占位符，不参与校验，也不影响提交逻辑。用户输错格式照样能点提交，浏览器不会拦截。
- 它只在 input 为空时显示，一旦开始输入就消失，无法持续提醒结构（比如 “(123) 456-7890” 中括号和横线的位置）
- 屏幕阅读器基本不读
placeholder，对无障碍用户无效 - 移动端 iOS Safari 对
placeholder垂直对齐敏感，常被截断或缩成“请输入…” - 别写
placeholder="例：13812345678"—— 容易被当成已填内容，尤其配合自动填充时更混乱
pattern 属性必须带 ^ 和 $ 才生效
写了 pattern="[0-9]{11}" 却拦不住 “123” 或 “123456789012”，是因为正则没锚定边界。浏览器对 pattern 隐式加 ^ 和 $，但前提是你的正则本身语法正确、转义完整。
- 手机号要写
pattern="^1[3-9]d{9}$"，不是pattern="1[3-9]d{9}" - 身份证末位可能是
X或x，得写pattern="^[1-9]d{5}(18|19|20)d{2}(0[1-9]|1[0-2])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$" - 反斜杠在 HTML 属性里会被解析为普通字符，
d要写成\d或改用[0-9]更稳妥 -
pattern只对type="text"、type="tel"、type="email"等文本类生效，type="number"不支持
移动端键盘类型得靠 inputmode + type 双保险
inputmode 是软提示，告诉手机该弹什么键盘；type 才决定语义和基础校验。光设 type="tel" 不一定弹数字键盘，尤其在某些 Android WebView 里。
立即学习“前端免费学习笔记（深入）”；
- 手机号推荐：
<input type="tel" inputmode="tel"> - 金额输入用
inputmode="decimal"，比numeric多小数点，比text少字母键 -
inputmode="none"适合自定义输入组件（如带格式化逻辑的电话输入框），但必须配 JS 校验兜底 - 桌面端忽略
inputmode，所以它不影响 PC 用户体验，但也不能替代pattern或后端验证
错误提示文案必须用 setCustomValidity 动态控制
浏览器默认提示是系统语言且不可定制，比如 “Please match the requested format”。想统一中文提示，必须用 JS 拦截并重置。
- 在 input 上绑定
oninvalid="this.setCustomValidity('请输入11位手机号')" - 关键：后续每次输入都要清空自定义错误，否则合法输入仍报错 —— 加
oninput="this.setCustomValidity('')" - 别只依赖
title显示错误原因，移动端不触发，且语义上它是补充说明，不是校验反馈 - 复杂规则（如两次输入密码一致）必须走 JS，
pattern无法跨字段比对
最易被忽略的一点：所有前端提示都只是“友好拦截”，pattern 会被绕过，inputmode 可被无视，placeholder 可被忽略。真正可靠的准确性，永远建立在后端完整校验之上。
