pattern属性无法实时拦截空格输入，仅在提交或checkvalidity()时校验；正确写法为^1*$，需配title提示，并用blur事件trim双保险。\s ↩
pattern 属性不支持实时拦截空格输入
HTML 的 pattern 属性只在表单提交或调用 checkValidity() 时触发校验，它**不会阻止用户输入、粘贴或拖入空格**。即使写了禁止空格的正则，用户依然能在首尾或中间输入空格，提交前才报错。这是原生行为，不是 bug。
所以“用 pattern 校验不包含空格”的真实含义，其实是：提交时拒绝含空格的值，并给出明确提示。它不负责清理，也不负责实时反馈。
写对 pattern 才能真正匹配“无空格”
要让 pattern 正确拒绝任何空格（包括首尾和中间），必须用 ^[^\s]*$ 这类写法——注意：不能加斜杠，也不能写 /^[^\s]*$/ 或 ^[^\s]+$（后者会拒绝空字符串，与 required 冲突）。
-
^[^\s]*$✅ 安全：允许空字符串（交由required控制是否必填），且非空时每个字符都不能是空白符（\s包含空格、制表符、换行等） -
^[^ ]*$⚠️ 仅防空格：不拦制表符、换行符，语义不完整 -
^[a-zA-Z0-9_]*$⚠️ 白名单式：可读性强，但漏掉中文、emoji 等合法非空格字符，业务中慎用 -
\S+❌ 错误：pattern 不接受无锚点写法；浏览器会自动包裹 ^$，所以这等价于^\S+$，拒绝空值，破坏required逻辑
为什么 title 属性不能省
没设 title，Chrome 和 Firefox 默认提示是“请与所要求的格式匹配”，用户完全不知道“不能有空格”。而 title="请输入不含空格的内容（如用户名、邮箱前缀）" 是唯一复用在 hover、错误气泡、input.validationMessage 中的文案。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
iOS Safari 对 title 渲染较弱，若需强提示，得配合 JS 调用 setCustomValidity() 补充。但 title 仍是基础必备项，不参与校验，只用于表达规则。
必须搭配 JavaScript 做 trim 双保险
只靠 pattern 会把带空格的脏数据留在 value 里——后端还得处理，也影响后续 JS 逻辑（比如拼接 URL、查数据库）。稳妥做法是在 blur 时清理并触发校验：
el.addEventListener('blur', () => {
const trimmed = el.value.trim();
if (trimmed !== el.value) {
el.value = trimmed;
el.reportValidity();
}
});
别在 input 事件里无条件 trim()：光标会跳、无法在中间插入空格后继续编辑。blur 时机更符合用户操作直觉，也避免干扰输入过程。
复杂点在于：pattern="^[^\s]*$" 只管空格，不管全角空格（ ）、零宽空格（）等 Unicode 空白符。真有这类需求，JS 侧得用 /[\s\uFEFF\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/g 手动替换，pattern 无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
