maxlength和minlength仅对type="search"有效且需配合required才触发校验；pattern需搭配title才能提示，正则须用^$包裹并注意unicode范围；所有原生校验均需服务端二次防护。

maxlength 和 minlength 能直接校验长度，但只对 type="search" 有效；pattern 可约束格式，但必须配合 title 才有提示。别指望它在所有浏览器里实时响应——提交前才校验是常态。

search 输入框的 minlength 为什么经常不生效

因为 minlength 在 type="search" 上虽被支持，但触发条件苛刻：它只在表单 submit 或显式调用 checkValidity() 时检查，不会监听输入过程。更关键的是，如果没加 required，空值（长度为 0）根本不会触发 minlength 报错。

• 必须同时写 required + minlength="2"，否则用户清空后还能点提交
• Safari 直到 v16.4 才完整支持 minlength，旧版会静默忽略
• 移动端软键盘点击“搜索”按钮时，部分 Android 浏览器可能跳过校验，得额外监听 blur 或 input
• minlength 对 type="number"、type="date" 等无效，但 search 属于支持列表，放心用

用 pattern 限制关键词只能是中文/字母/数字组合

pattern 是唯一能兼顾格式与长度范围的原生方案，比如要求“2–10 个中英文或数字”，正则写成 ^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$。注意它不自动去首尾空格，所以用户输 " 你好 " 会被拒绝——这其实是优点，避免脏数据进后端。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 必须搭配 title 属性，否则验证失败时只显示“请匹配指定格式”，用户看不懂
• 正则开头不用 ^、结尾不用 $ 会导致部分匹配（如 pattern="ab" 会允许 "xabx"）
• 中文 Unicode 范围用 \u4e00-\u9fa5 覆盖常用汉字，但不含 emoji、生僻字或全角标点
• 若需允许空格，把 加进字符组，如 [a-zA-Z0-9\u4e00-\u9fa5 ]{2,10}，但要提醒用户空格也算字符

maxlength 截断粘贴内容是否可靠

现代浏览器（Chrome/Firefox/Edge/Safari v16.4+）对粘贴操作基本能按 maxlength 截断，但行为不完全一致：Chrome 会自动截掉超长部分并聚焦光标到末尾；Safari 有时只阻止粘贴，不报错也不提示；Firefox 则可能允许粘贴成功，但后续输入被禁——这说明不能只靠它防数据溢出。

• 服务端仍需做二次长度校验，前端只是体验层防护
• 如果业务强依赖精确长度（如搜索词分词），建议 JS 监听 input 事件手动 slice(0, 20) 并同步 value
• maxlength 计数规则统一：一个汉字、一个 emoji、一个空格、一个换行符，都算 1 个字符
• 不要用 CSS ch 单位代替 maxlength，它只影响视觉宽度，不影响实际输入上限

真正容易被忽略的是：原生校验只管“提交瞬间”的快照，而用户可能在输入中途切换标签页、长时间停留、再回来修改——此时 UI 状态（如红框、错误提示）可能已失效。需要 JS 主动维护 validity 状态，或干脆放弃纯原生，用 reportValidity() + 自定义反馈补位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！