必须在submit事件中拦截默认行为并清洗表单字段：用querySelectorAll获取所有输入节点，正则清除首尾全角/半角空格、零宽字符等，再手动submit；不同字段按语义区别处理首尾或内部空格；FormData需清洗后构造；前端清洗仅为体验优化，后端仍须独立校验。
不能只靠 trim()，更不能用 onkeypress 拦空格键——前者漏掉全角空格和零宽字符，后者根本拦不住粘贴和自动填充。
submit 事件里必须做清洗，但得先拦默认行为
表单提交时，event.preventDefault() 是硬性前提，否则 JS 清洗逻辑直接被绕过。清洗必须在拦截后、手动提交前完成：
- 用
form.querySelectorAll('input, textarea')批量获取字段，避免漏掉动态插入的节点 - 对每个字段调用
el.value = el.value.replace(/^[\s\uFEFF\u200B\u00A0]+|[\s\uFEFF\u200B\u00A0]+$/g, '')，覆盖半角/全角空格、零宽空格（\u200B）、不间断空格（\u00A0） - 别直接改
event.target.elements，它返回的是只读集合；操作 DOM 节点本身才有效 - 清洗完再调用
form.submit()，而不是靠原生提交机制
哪些字段该 trim，哪些不该动内部空格
清洗不是一刀切。关键看字段语义：
- 邮箱、用户名、密码、URL 等：必须用
.trim()或正则去首尾，且不允许中间有空格 → 可追加.replace(/\s/g, '') - 姓名、地址、备注等：只清理首尾冗余空格，保留内部空格（如“北京 市朝阳区”），禁止压缩成“北京市朝阳区”
- 富文本或
textarea：换行符要保留，但需额外过滤控制字符（.replace(/[\u0000-\u001f\u007f-\u009f]/g, '')）
FormData 里的空格陷阱
用 new FormData(form) 拿数据看似方便，但它返回的是原始值，包括所有没被清洗的空格和零宽字符。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 先调用清洗逻辑，再构造
FormData - 或用
Object.fromEntries(new FormData(form))转对象后逐字段清洗，尤其注意name属性为空或重复时的边界 - 文件字段（
<input type="file">）不参与字符串清洗，但需单独校验文件名是否含非法空格
React/Vue 中别在 onChange 里实时 trim
在输入过程中直接修改值，会导致光标跳到末尾，破坏编辑体验。真实项目中应：
- React：在
onChange中只做轻量标准化（如value.trimStart().replace(/\s+/g, ' ')），结尾空格留到提交时再.trim() - Vue：避免
@input中赋值，改用@blur或自定义指令（如v-trim） - 统一收口到提交函数，而非分散在每个 input 的事件里
最常被忽略的一点：前端清洗只是防手误，不是安全边界。curl、禁用 JS、浏览器开发者工具改值，都能绕开所有 JS 逻辑。后端收到的每个字段，仍得独立跑一遍 /^\s*$/ 判空、.trim()、XSS 过滤和长度截断。
