HTML表单本身不能实时拦截非法字符，pattern仅提交校验；真正实时过滤须用JavaScript监听input事件并replace清洗，同时需处理paste、光标位置及Unicode边界字符。
HTML 表单里不能直接用正则校验非法字符？
HTML 本身不支持在 中用正则“过滤”或“阻止”非法字符输入——pattern 属性只做提交前校验，且仅对整个值做匹配，不拦截实时输入。想实时拦截（比如禁止粘贴 `<script>` 或控制字符），必须靠 JavaScript。</script>
用 pattern 做提交前白名单校验
pattern 适合定义“合法格式”，比如只允许字母、数字、下划线和短横线：
<input type="text" pattern="[a-zA-Z0-9_-]+" title="只能输入字母、数字、_ 或 -">
注意点：
-
pattern默认是“从头到尾匹配”，不需要写^和$ - 浏览器只在表单调用
checkValidity()或用户点击提交时触发校验，不阻止oninput或粘贴 - 中文、空格、emoji 等默认不被上面的正则覆盖，需显式加入，例如
[a-zA-Z0-9\u4e00-\u9fa5\s]+（但要小心全角空格、零宽字符等边界情况） - 某些老版本 Safari 对 Unicode 范围支持不稳定，生产环境建议测试
用 input 事件 + replace() 实时清理
真正拦截非法字符得监听 input，对 value 做即时清洗。比如禁止所有 HTML 标签字符和控制字符：
input.addEventListener('input', () => {
input.value = input.value.replace(/[&\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, '');
});
常见处理逻辑：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g, '')只保留中英文、数字、空格（注意：会删掉换行、制表符，如需保留请加\n\t） - 避免在
input中直接改value后再调setSelectionRange，否则光标会跳到末尾；如需保持光标位置，得先记录selectionStart/End - 粘贴（
paste事件）也要单独监听，因为input在粘贴后才触发，用户可能已看到非法内容闪现
为什么不用 onkeypress 拦截？
onkeypress 已废弃，且无法捕获：
- 剪贴板粘贴（
Ctrl+V/ 右键粘贴） - IME 输入（中文拼音上屏瞬间的中间态）
- 拖放文本
- 软键盘或语音输入
现代做法是监听 input（覆盖所有输入源），配合 beforeinput（实验性，可取消原生行为但兼容性差）做增强。别依赖 keydown 的 event.key 判断——它对组合键、IME 不可靠。
最易被忽略的是：正则里的 Unicode 范围容易漏掉零宽空格（\u200b）、字节顺序标记（\ufeff）、方向控制符（\u202a-\u202e），这些在富文本或复制粘贴场景常出现，却不会被普通 [^\x20-\x7E] 捕获。真要防注入，光靠前端正则远远不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
