HTML表单过滤必须由JavaScript或后端实现，前端仅能拦截、清洗、提示；required和pattern不阻止非法输入，pattern不支持Unicode简写；input事件是唯一覆盖全部输入路径的实时过滤方式；提交前须preventDefault()并手动submit()；多选需name统一+FormData.getAll()；服务端校验不可替代。

HTML 表单本身不做任何过滤，所谓“过滤”必须由 JavaScript 主动干预或后端兜底。前端能做的只是拦截、清洗、提示，且所有前端操作都可被绕过。

为什么不能只靠 required 和 pattern

required 只检查是否为空，pattern 仅在调用 reportValidity() 或原生提交时触发校验，既不阻止非法字符输入，也不修改 value。用户粘贴一段含 <script></script> 的文本，pattern="[a-z]+" 完全无效。

• 常见错误：把 pattern 当成实时过滤器，结果提交时才弹红框，体验割裂
• pattern 不支持 Unicode 范围简写（如 \p{Han}），中文得写成 [\u4e00-\u9fa5]
• 移动端可能因 pattern 切换键盘类型，但不影响实际输入内容，别误判为“已限制”

用 input 事件做实时过滤最靠谱

input 事件能捕获键盘输入、粘贴、拖入、自动填充等全部来源，是唯一覆盖完整输入路径的监听方式。比 keydown 或 change 更及时、更可靠。

• 对 和 都有效
• 过滤后赋值回 e.target.value，但要注意光标位置跳变——必要时用 e.target.setSelectionRange() 保持
• 示例中用 replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '') 清除非字母数字及中文，但金额、邮箱等字段需按语义定制逻辑，不能一刀切

表单提交前必须调用 event.preventDefault()

哪怕你已经改了 input.value，只要没在 submit 处理函数里调用 event.preventDefault()，浏览器仍会提交原始 DOM 值——前面所有 JS 过滤都白做。

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

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

下载

• 推荐用 addEventListener('submit', ...)，比内联 onsubmit="return false" 更易维护、复用和测试
• 修改 value 后，记得显式调用 this.submit() 触发干净数据提交
• 别直接操作 event.target.elements 的引用，应取节点后改其 value 或 textContent

多选过滤（如品牌 checkbox）必须靠 name 统一 + FormData.getAll()

checkbox 组要真正参与表单逻辑（提交或 JS 读取），关键不是 class 或 data- 属性，而是共用 name 并设好 value。漏掉 value 就只能拿到一堆 "on"。

• 每个 必须有 name="brand" 和具体 value="apple"
• JS 获取时优先用 new FormData(form).getAll('brand')，返回 string[]，未勾选时是空数组，无需额外判空
• 别用 querySelectorAll('input:checked') 手动遍历——容易漏掉动态插入项，且不兼容 disabled 状态处理

真正的过滤防线永远在服务端。前端改的只是用户看到的值，后端收到的 req.body 或 $_POST 仍是原始输入，必须重新清洗、校验、转义。任何依赖前端“已过滤”的假设，都会在 curl、Postman 或禁用 JS 的场景下当场翻车。

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