前端无法真正过滤用户输入，真实过滤必须由后端完成；input事件是唯一覆盖全部输入路径的监听方式，需在回调中清洗value并手动恢复光标位置，提交前须preventDefault()且服务端必须重新校验。

前端无法真正“过滤”用户输入——只能拦截、清洗、提示，且所有前端操作都可被绕过。真实过滤必须由后端完成。

input 事件是唯一覆盖全部输入路径的监听方式

键盘输入、粘贴、拖放、自动填充、语音输入等，input 事件都能捕获；keydown 捕不到粘贴，change 只在失焦时触发，完全不满足实时性要求。

• 对 和 都有效
• 过滤逻辑应写在事件回调里，比如用 replace() 清除非预期字符
• 注意赋值后光标跳变：修改 e.target.value 后，需手动调用 e.target.setSelectionRange() 恢复光标位置（尤其中文输入法下）
• 别在 input 里做复杂正则或大量 DOM 操作，否则滚动/输入会卡顿

pattern 不是过滤器，只是提交前校验提示

pattern 属性只影响 reportValidity() 和原生表单提交时的 UI 提示，它既不阻止输入，也不修改 value。用户粘贴一段含 <script></script> 的文本，pattern="[a-z]+" 完全无效。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• pattern 不支持 Unicode 简写（如 \p{Han}），中文得显式写成 [\u4e00-\u9fa5]
• 移动端可能因 pattern 切换键盘类型，但不影响实际输入内容，不能当作限制依据
• 真正要“过滤”，必须监听 input 并主动改 e.target.value

提交前必须 preventDefault()，否则 JS 过滤白做

哪怕你已经把 input.value 改成干净字符串，只要没在 submit 事件处理函数中调用 event.preventDefault()，浏览器仍会提交原始 DOM 值——前面所有清洗都失效。

• 推荐用 form.addEventListener('submit', handler)，比内联 onsubmit="return false" 更可控
• 清洗完成后，显式调用 form.submit() 触发干净数据提交
• 别直接操作 event.target.elements 的引用，应先取节点再改其 value 或 textContent
• 多选框（checkbox）务必统一 name 并设 value，读取时用 new FormData(form).getAll('brand')，不是 querySelectorAll('input:checked')

最易被忽略的一点：前端清洗永远只是用户体验层的辅助，不是安全边界。恶意请求可跳过页面直接 POST 数据，所以服务端必须重新解析、转义、校验、白名单过滤——哪怕前端已做十遍。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！