pattern仅提交时校验，不拦截输入；实时过滤需oninput+正则替换，并搭配required和title提示。
pattern属性只校验提交，不拦输入
写了 pattern="[0-9]{6}" 却发现用户照样能输字母、粘贴带符号的字符串——这不是 bug，是 pattern 的设计逻辑：它只在表单提交或调用 checkValidity() 时触发匹配，过程中完全放行。想实时过滤，必须靠 JS。
常见错误现象：
- 用户输入
12a345后点提交才报错，体验割裂 - 没加
required，空值直接通过，pattern 形同虚设 - 写了
pattern="/^[0-9]{6}$/"，斜杠被当作文本字符，正则失效（浏览器提示 “Unable to check” 或静默跳过）
正确做法：
- pattern 写裸字符串：
pattern="[0-9]{6}"（浏览器自动加 ^ 和 $） - 必须搭配
required，否则空值绕过校验 - 加
title属性提供友好提示：title="请输入6位数字"
oninput 实时过滤比 pattern 更可靠
要真正“限制输入”，得用 oninput + 正则替换。它在每次输入、粘贴、拖入后立即执行，兼容 IE11+ 和所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
关键细节：
-
oninput="this.value = this.value.replace(/[^0-9]/g, '')"：删掉所有非数字字符，保留空字符串（允许清空） - 别用
onkeyup：中文输入法下回车可能上屏汉字，oninput才能捕获最终值 - 配合
inputmode="numeric"，iOS/Android 更倾向弹出数字键盘 - type 必须是
text或tel；type="number"会忽略 pattern，且 oninput 中this.value返回字符串，但输入法行为不稳定
小数场景需额外处理：
- 基础过滤：
oninput="this.value = this.value.replace(/[^0-9.]/g, '')" - 防多个小数点：
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/\.+/g, '.').replace(/^\.|(\.\d{2}).+$/g, '$1')"（限制最多两位小数）
中文、混合字符的 pattern 写法要避开 Unicode 兼容坑
想限制只能输中文+字母+数字，写 pattern="[\u4e00-\u9fa5a-zA-Z0-9]+" 看似合理，但在旧版 Android WebView 中可能不识别 \u 开头的 Unicode 范围，导致整个 pattern 失效。
更稳妥的做法：
- 纯前端轻量校验，优先用
oninput替换，pattern 仅作提交兜底 - pattern 中避免复杂 Unicode 范围，如必须支持中文，用
[\u4e00-\u9fa5]时，务必测试目标 Android WebView 版本（ - 混合字符推荐分步：
oninput="this.value = this.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')" - 连字符
-在字符类[]中必须放最前或最后：[-a-zA-Z0-9]✅，[a-z-0-9]❌（会被解析为非法范围）
注意：pattern 不支持标志位（如 i），大小写敏感需显式写 [a-zA-Z]，不能依赖 [a-z] + i。
minlength 和 pattern 别指望自动协同
minlength="6" 和 pattern="[a-z]{8}" 不会“合起来变成至少 6 且至多 8”——它们是两套独立验证机制，浏览器分别检查，失败时只显示第一个不满足项的提示（通常是 minlength 先报）。
实际效果取决于你怎么组合：
-
minlength="6" pattern="[a-z]{6,12}"：用户必须输满 6 字符，且内容必须全小写字母、长度 6–12 -
minlength="6" pattern="[a-z]+"：只要 ≥6 字符且全小写就过，哪怕输 100 个 a 也合法
容易被忽略的点：
- minlength 按 UTF-16 code units 计数，一个 emoji（如 ?）算 2 个单位；pattern 中的
{6}是按 Unicode 字符计数，二者口径不一致 - 服务端必须二次校验：前端任何限制都可被绕过，pattern/minlength 都不是安全边界
- 移动端对
title提示支持弱，Safari 常忽略，建议用 JS 监听invalid事件补提示
