minlength属性本身不触发警告提示，仅在checkvalidity()或表单提交时生效；需配合:invalid伪类、css样式或javascript监听input事件并调用checkvalidity()实现视觉反馈与实时提示。

minlength 属性本身不触发警告提示

minlength 是 HTML5 表单约束属性，它只在 checkValidity() 或表单提交时生效，**不会自动显示警告 UI**。用户输得少，输入框看起来一切正常，直到点击提交才报错——这显然不是“实时警告”的体验。

用 :invalid 伪类 + CSS 实现实时视觉反馈

浏览器会在 input 值不满足 minlength（且已失去焦点或已被交互过）时，自动添加 :invalid 状态。关键是：必须配合 :user-invalid 或确保元素处于“已尝试提交”状态，否则刚打开页面时空白输入也会被标红。

• 推荐加 :focus:invalid 或 .touched:invalid 类做更可控的触发时机
• CSS 示例：

  input:minlength="6":invalid:not(:placeholder-shown) { border: 2px solid #f00; }<br>input:minlength="6":valid { border-color: #0a0; }

• :placeholder-shown 能避免 placeholder 显示时误判为空

用 JavaScript 监听 input + checkValidity() 手动提示

要真正“未满就警告”，得靠 JS 主动检查并操作 DOM。注意别用 keyup——中文输入法下会误判（按下拼音键就触发），改用 input 事件更稳妥。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 监听 input 事件，调用 element.checkValidity()
• 若返回 false，读取 element.validationMessage 获取默认提示（如 “请输入至少 6 个字符”）
• 把提示塞进相邻 <span class="error"></span>，并用 aria-live="polite" 保证读屏器可感知
• 别在每次输入都弹 alert() —— 用户体验极差，也违反无障碍规范

Chrome/Firefox 对 minlength 的兼容细节

minlength 在现代浏览器支持良好，但有两个坑：

• Safari 15.4 之前不支持 minlength 对 type="number" 生效（它只校验数值范围，不计长度）
• 所有浏览器对 type="email" 或 type="url" 应用 minlength 时，只按字符串长度算，不管邮箱格式是否合法
• 如果同时设了 required 和 minlength，空值会优先触发 required 错误，minlength 不会覆盖

真正要“字符未满就警告”，核心不是加个属性，而是明确控制反馈时机和方式。很多人卡在以为 minlength 自带 UI，其实它只是约束开关，其余全得自己搭。

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