pattern属性对空格不生效，因其仅对type="text"、"email"、"url"、"password"等文本类型生效，type="number"或"type=date"会直接忽略；且pattern默认不处理空格，需配合required拦截空值，并用/^\s*$/校验纯空白字符。
pattern 属性对空格不生效？先确认 type 是否支持
很多同学写 pattern="^\S+$" 发现完全没反应，不是正则写错，而是 pattern 只对 type="text"、"email"、"url"、"password" 等生效，对 type="number" 或 type="date" 直接忽略。浏览器压根不跑你的正则。
- 检查 input 的
type是否为允许 pattern 的类型；如果不是，要么换 type，要么放弃原生 pattern，改用 JS 校验 -
type="text"是最稳妥的选择，哪怕字段语义是数字，也建议用 text + JS 控制输入，避免 pattern 失效 -
required和pattern必须共存：空值由required拦，格式由pattern拦，缺一不可
^\s*$ 为什么比 value.trim() === '' 更可靠
前端判断“纯空格”最常踩的坑，就是用 value.trim() === ''。它漏掉 Unicode 零宽空格（\u200B）、字节顺序标记（\uFEFF）等不可见字符，导致校验绕过。
- 真正健壮的判断是
/^\s*$/.test(value)——它匹配所有空白字符（空格、制表符、换行、Unicode 空白） - 必须加
typeof value === 'string'前置判断，否则传入null或undefined会报TypeError - 不要用
!value，因为' '是真值，而0、false会被误判为空
submit 事件里怎么安全地 trim 字段
想在提交前统一清理首尾空格，但又不能破坏用户合法输入（如“张 三”、“北京 市”），就得按字段类型区别对待。
- 对
email、username、password这类字段，提交前可放心调用.trim() - 对
name、address、remark这类字段，只做/^\s*$/.test()判空，不主动裁剪 - 清洗逻辑必须收口到
form.addEventListener('submit', e => { e.preventDefault(); ... })里，别分散在每个input的blur或change中 - 后端仍要重复这套逻辑——前端
trim()不是安全边界，只是体验优化
Vue/React 中 v-model / value + onChange 怎么避免光标跳动
框架的双向绑定不会自动 trim，但直接在 @input（Vue）或 onChange（React）里 trim() 并更新 state，会导致光标强制跳到末尾，用户无法在中间插入空格。
- Vue 推荐用
@blur触发 trim，或封装v-trim指令，在失焦时处理 - React 不要在
onChange里同步e.target.value.trim()，改用useEffect监听blur，或仅在提交函数中处理 - 更干净的做法：保留原始输入，校验和清洗全部延迟到提交时刻，state 里存的是用户真实输入
checkValidity()**。也就是说，写了 pattern 却没在 submit 里调这个 API，浏览器根本不会告诉你它没过——它只是静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
