html pattern 属性仅支持白名单式字符匹配，需显式定义允许字符集（如[a-za-z0-9_ -]），不支持否定逻辑；仅对text/search等六种type生效，且仅提交时校验，实时过滤须结合js input事件处理。
pattern 属性不支持直接“校验特殊字符”，只能匹配允许的字符
HTML 的 pattern 本质是白名单机制：你写什么，就只允许什么。它没有“禁止某类字符”的语法，也不能用 ^ 或 $ 做否定逻辑（比如 [^!@#$%] 在部分浏览器中行为不可靠）。想“过滤特殊字符”，得反向定义——只列出允许的字符集。
常见错误是照搬 JS 正则写法，比如：pattern="[^!@#$%^&*+=]"。这在 HTML 中会匹配单个非特殊字符，而非整串“不含特殊字符”，且 Safari 可能跳过验证。
-
pattern="[a-zA-Z0-9_ ]+"：允许字母、数字、下划线、空格（注意空格要显式写进字符集） -
pattern="[^\x00-\x1F\x7F-\x9F]+：❌ 不推荐，Unicode 范围在 pattern 中兼容性差，Chrome/Firefox 解析不一致 - 若需排除所有非 ASCII 字符，用
pattern="[\x20-\x7E]+"（可打印 ASCII），但中文会被拦掉——这不是 bug，是设计使然
type="text" 是唯一稳妥支持 pattern 的通用类型
pattern 只对 text、search、tel、url、email、password 六种 type 生效。其中只有 text 和 search 完全保留原始输入字符串，不会被浏览器自动转换或截断。
别用 type="number" 配 pattern——浏览器先转成数字，前导零被删，pattern 根本收不到字符串；type="email" 虽支持 pattern，但会叠加自身邮箱校验，容易冲突。
- ✅ 推荐：
<input type="text" pattern="[a-zA-Z0-9_ -]{3,20}" title="仅允许字母、数字、下划线、短横线和空格"> - ⚠️ iOS 注意：
type="tel"唤起数字键盘体验好，但用户仍可粘贴字母，pattern仅在提交时触发，无法实时拦截 - ❌ 禁止：
<input type="number" pattern="[0-9]+">——永远不校验
真正要“禁止特殊字符”，必须用 JavaScript 实时拦截
HTML pattern 只在表单提交时校验，无法阻止用户输入或粘贴非法字符。要实时过滤，得监听 input 事件并清理值。
关键点：不能只靠 replace()，要防止光标跳位、粘贴破坏体验、以及绕过 JS 的手动修改（如开发者工具改 DOM）。
- 用
input事件 +setSelectionRange保光标位置 - 正则用
/[^a-zA-Z0-9_ -]/g替换非法字符，别漏g标志 - 示例逻辑：
el.value = el.value.replace(/[^a-zA-Z0-9_ -]/g, '')，然后调用el.reportValidity()触发 UI 反馈 - ⚠️ 注意：
onpaste事件里也要做同样清洗，否则粘贴含特殊字符的文本会失效
title 提示语必须写清楚“允许什么”，而不是“禁止什么”
浏览器错误气泡只显示 title 内容，且不解析 HTML 或 JS。写“请勿输入特殊字符”等于没说——用户不知道哪些算“特殊”。
title 是唯一复用的提示出口，它同时用于 hover、焦点提示、validationMessage 属性，所以必须具象。
- ✅ 好：
title="仅支持字母、数字、下划线、短横线和空格，长度3–20位" - ❌ 差：
title="格式错误"或title="不能有特殊字符" - iOS Safari 对
title支持弱，若强依赖提示，得补setCustomValidity("...")，且每次合法输入后要清空：el.setCustomValidity('')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
