pattern属性仅提交时校验，不拦截非法输入；input事件+replace()可实时过滤，支持键盘、粘贴等所有输入场景，真正限制字符集。
直接用 pattern 属性配合正则表达式，或用 JavaScript 的 input 事件实时过滤，是限制 HTML 表单元素只允许特定字符的两种可靠方式。前者只在提交时校验，后者真正阻止非法输入。
pattern 属性只校验不拦截，适合轻量提示
pattern 是 HTML5 原生属性，它定义输入值必须匹配的正则规则，但**不阻止用户输入非法字符**，只在表单提交时触发浏览器原生验证。
- 例如只允许英文字母和数字：
<input type="text" pattern="[a-zA-Z0-9]*" title="只能输入英文字母和数字"> - 若用户输进空格或中文，输入框仍能显示，但点击提交时会弹出
title提示并阻断提交 - 注意：必须包裹在
<form></form>内，且用<button type="submit"></button>或回车触发，否则验证不会生效 - 对粘贴内容完全无效——用户右键粘贴一串带符号的文本，
pattern不做任何处理
input 事件 + replace() 实时清理，推荐用于严格控制
监听 input 事件，在每次输入后立即用 replace() 清除非法字符，体验更干净、控制更彻底。
- 核心逻辑：
input.value = input.value.replace(/[^a-zA-Z0-9]/g, '')—— 匹配所有非字母数字字符并删掉 - 适用于
<input type="text">和<textarea></textarea>，无需区分类型 - 对键盘输入、粘贴、拖入文本、IME 输入均有效（现代浏览器中
input事件覆盖绝大多数场景） - 如果需要保留下划线，正则改为
/[^a-zA-Z0-9_]/g；如需禁止大写，用/[^a-z0-9]/g
粘贴内容需额外处理 paste 事件
仅靠 input 事件有时会滞后——比如用户粘贴一段含换行、制表符或 emoji 的长文本，input 触发前非法字符已短暂进入输入框。这时要补上 paste 监听。
- 在
paste中调用event.preventDefault()阻止默认粘贴行为 - 用
event.clipboardData.getData('text')获取原始文本，清洗后再手动插入：input.value += cleanedText - 注意：不能直接赋值整个
input.value，否则会覆盖光标位置；追加更安全 - 不需要同时监听
keydown——它对粘贴、语音输入、IME 等无效，反而增加复杂度
maxlength 和 type 是辅助，不是字符集控制手段
maxlength 控长度，type="email" 或 type="number" 控语义和软键盘，它们**都不限制字符集本身**。
-
<input type="number" maxlength="6">仍可能被输入字母（尤其在 iOS 上按住“123”键可切出字母） -
type="text"是最通用类型，字符限制逻辑应统一由pattern或 JS 承担 - 不要指望
type="tel"能过滤非数字——它只是唤起数字键盘，用户依然可以粘贴中文 - 服务端永远要重新校验：前端限制可被绕过，
replace()也挡不住直接调 API 的请求
真正难的不是写那行 replace()，而是想清楚哪些字符算“合法”——比如是否允许连字符、点号、空格？是否区分中英文标点？这些边界一旦定错，后面改起来比加逻辑还费劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
