pattern属性仅在表单提交时校验，无法实时拦截非法输入；必须用input事件配合replace()过滤，并绑定paste事件防绕过。
直接用 pattern 属性只能做提交校验，拦不住非法输入；真要实时限制，必须靠 JavaScript 的 input 事件配合 replace() 过滤，再补上 paste 事件防粘贴绕过。
为什么 pattern 属性不够用
pattern 是 HTML5 表单验证机制，只在 form.submit() 时触发，不干预用户键入过程。用户仍可输入 @#$% 等字符，直到点击提交才弹提示——体验差，且无法防止脏数据进入 DOM。
- 它隐式加了
^和$，所以写pattern="[a-zA-Z0-9]*"就够，不用写成"^[a-zA-Z0-9]*$" - 不支持零宽断言（如
(?=.*\d)）、\uUnicode 转义等高级语法 - 错误提示依赖浏览器默认行为，
title只是补充说明，不能自定义交互
input + replace 实现实时过滤（推荐）
监听 input 事件，在每次输入后立刻清理非法字符，是最常用也最可靠的方案。
- 正则写法用
/[^a-zA-Z0-9]/g：匹配所有「非英文字母、非数字」的字符，g确保全部替换，不是只清第一个 - 必须用
oninput，而不是onkeyup：oninput覆盖键盘输入、粘贴、拖拽、IME 输入等所有变更场景；onkeyup漏掉鼠标粘贴和语音输入 - 示例：
- 注意：不要在
replace()后直接赋值空字符串，否则会清空整个输入框；应只替换非法字符，保留合法部分
别忘了 paste 事件防粘贴绕过
用户右键粘贴或 Ctrl+V 时，input 事件可能来不及拦截——尤其粘贴含换行、emoji 或全角字符的大段文本时。
- 必须额外监听
onpaste，并在事件回调里同步执行相同过滤逻辑 - 更稳妥的做法是：在
onpaste中调用event.preventDefault()，读取剪贴板内容，清洗后再插入 - 简单兼容写法：
- 但要注意：某些浏览器对
onpaste的触发时机有延迟，最好把清洗逻辑抽成函数复用
textarea 的处理和 maxlength 的配合
textarea 和 input[type="text"] 在正则过滤逻辑上完全一致，但需额外考虑长度控制。
-
maxlength属性原生支持，优先用它限制总字符数，比 JS 计算更可靠（尤其含 emoji、代理对时） - 如果既要格式限制（仅字母数字），又要长度限制（比如最多 20 字符），两个条件要同时满足：
maxlength="20"+oninput清洗 - 避免在
oninput里手动截断：this.value = this.value.slice(0, 20)—— 它会破坏光标位置，导致输入卡顿或跳位 - 真正需要动态提示剩余字数时，才用 JS 监听并更新 UI，不要用它来强制截断
最易被忽略的是：正则中的 g 标志和 onpaste 的双重绑定。少一个，就可能让非法字符从粘贴口子溜进去；没 g，用户连按两次符号只会删掉第一个，第二个还在那儿等着提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
