正确做法是用 ^ 和 $ 锚定首尾：pattern="^.{5,10}$"；若需支持中文，须显式添加 unicode 范围 \u4e00-\u9fa5，如 ^[a-za-z0-9_\u4e00-\u9fa5]{5,10}$；注意 pattern 仅提交时校验，且不处理空格等不可见字符。
HTML input 的 pattern 属性不支持直接写长度范围语法
很多人以为 pattern=".{5,10}" 就能校验 5–10 个字符，但实际它只在表单提交时触发校验，且不校验空格、换行等不可见字符是否被包含；更关键的是，pattern 默认是“部分匹配”——只要字符串中某一段符合正则就通过。比如 pattern=".{5,10}" 会错误地让 "abc\n1234567890"（含换行）通过。
正确做法是用 ^ 和 $ 锚定首尾：
<input type="text" pattern="^.{5,10}$" title="请输入5到10个任意字符">
-
^表示开头，$表示结尾，强制整个输入值完全匹配 - 若要排除空白字符（如用户只输空格），改用
^[^\s]{5,10}$或更严格的^[a-zA-Z0-9\u4e00-\u9fa5]{5,10}$（中英文数字） - 注意：浏览器原生校验不会实时提示，仅在提交或调用
reportValidity()时触发
中文、数字、字母混合长度校验要用 Unicode 范围
直接写 ^[a-zA-Z0-9]{5,10}$ 会把中文当作非法字符，因为中文不在 ASCII 范围内。必须显式加入中文 Unicode 区间 \u4e00-\u9fa5（基本汉字），否则输入“你好世界”会被拒绝。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
推荐写法（兼顾常用中文、英文、数字、下划线）：
<input type="text" pattern="^[a-zA-Z0-9_\u4e00-\u9fa5]{5,10}$" title="请输入5–10位中英文、数字或下划线">
- 别漏掉
^和$，否则“abc你好xyz123456”这种超长字符串也能过 -
\u4e00-\u9fa5不覆盖所有汉字（比如生僻字、扩展区），如需更全，可加\u3400-\u4dbf（扩展A）和\u9fa6-\u9fff（扩展B），但多数场景不必要 - 移动端键盘可能自动补全空格或标点，建议配合
oninput="this.value = this.value.trim();"预处理
需要实时反馈或复杂逻辑？别只靠 pattern
原生 pattern 校验太弱：无法区分“未填”和“填了但不合法”，不支持动态长度（如“最少6位，但邮箱必须带@”），也不提供自定义错误消息位置。
- 用 JavaScript 监听
input或blur事件，调用setCustomValidity()手动控制状态 - 例如限制密码长度 + 必须含数字：
input.addEventListener('input', () => { const v = input.value; if (v.length - 注意：调用
setCustomValidity('')是清除错误态的必要操作，漏掉会导致后续所有校验失败
移动端和旧版 Safari 对 Unicode 正则支持不稳定
iOS 14.5 之前、Safari 13.1 以下版本对 \u4e00-\u9fa5 这类 Unicode 范围的支持有 Bug，可能导致整个 pattern 失效（表单直接跳过校验）。不是报错，而是静默忽略。
- 兼容方案：服务端必须做二次校验，前端不能当唯一防线
- 降级写法（仅限紧急兜底）：
pattern="^[\u4e00-\u9fa5a-zA-Z0-9_]{5,10}$"改成先写中文范围再写 ASCII，部分旧引擎解析更稳 - 更稳妥的做法是放弃
pattern，改用 JS 校验并显示title提示，避免依赖浏览器实现细节
^ 和 $，以及服务端缺失的二次校验。正则写得再准，没锚住头尾等于白写；前端校验再全，没后端兜底就是裸奔。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
