html表单不负责敏感词过滤，前端仅能通过input事件实时清洗并阻止提交，但可被绕过；后端必须兜底校验，且需与前端规则一致。
HTML表单本身不做敏感词过滤，所有过滤逻辑必须由 JavaScript 主动干预或后端兜底；前端能做的只是清洗、提示、阻止提交，且全部可被绕过。
为什么 pattern 和 required 不能用于敏感词过滤
pattern 只在调用 reportValidity() 或原生表单提交时触发校验，既不拦截输入，也不修改 value；required 仅检查是否为空。用户粘贴含“违禁词”的文本，pattern="[a-z]+" 完全无效。
- 敏感词需实时匹配并替换，不是“格式校验”，
pattern语义不匹配 -
pattern不支持 Unicode 属性类（如\p{Han}），中文词得手动写范围：[\u4e00-\u9fa5] - 移动端可能因
pattern切换键盘类型，但不影响输入内容，别误判为“已过滤”
用 input 事件做实时敏感词清洗最可靠
input 事件能捕获键盘输入、粘贴、拖入、自动填充等全部路径，是唯一覆盖完整输入流的方式。比 keydown 或 change 更及时、更防漏。
- 清洗示例：
input.value = input.value.replace(/(政治|敏感|违禁)/g, '***'); - 注意光标跳变：清洗后建议用
e.target.setSelectionRange(pos, pos)锁定光标位置 - 避免全局正则卡顿：长文本建议加长度限制（如
if (input.value.length > 500) {...}）或分块处理 - 别只过滤
input，textarea同样要监听input事件
submit 事件里必须 preventDefault() 才生效
哪怕你已在 input 事件里改了 value，只要没在 submit 处理函数中调用 event.preventDefault()，浏览器仍会提交原始 DOM 值——前面所有 JS 过滤都白做。
- 推荐写法：
form.addEventListener('submit', e => { e.preventDefault(); form.submit(); }) - 不要用内联
onsubmit="return false"，不易复用和测试 - 多字段过滤时，别直接操作
e.target.elements引用，应取节点后改其value或textContent - 富文本编辑器（如 contenteditable）需额外处理 innerHTML，不能只改
value
后端才是最终防线，前端过滤纯属体验优化
禁用 JS、抓包重放、curl 提交原始数据——任何前端过滤都能被绕过。所以 req.body（Node.js）、$_POST（PHP）、request.form（Flask）拿到的数据，必须重新清洗。
- 服务端建议用白名单机制：如用户名只保留
[a-zA-Z0-9_\u4e00-\u9fa5]，其余全删 - HTML 标签过滤不能靠简单正则（如
/]*>/g），应使用成熟库（如 DOMPurify） - 前后端敏感词规则必须一致，否则前端“过滤成功”后端仍报错，用户困惑
- 日志里记录原始输入（脱敏后），便于追溯绕过行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
