唯一能自动唤起原生气泡提示的是用 或 触发表单提交；其他方式如 form.submit()、onclick 绑定或 event.preventDefault() 均跳过校验，需用 reportValidity() 手动触发。

直接用 或 触发表单提交，是唯一能自动唤起原生气泡提示的方式。其他操作（比如 JS 调用 form.submit()、绑定 onclick、或用了 event.preventDefault()）都会跳过校验。

确保表单结构和提交方式正确

浏览器只在原生 submit 事件中执行 required 校验并显示气泡。必须满足三个基本条件：

• 输入控件（、、）放在
  标签内
• 提交按钮必须是 或 ； 默认是 type="button"，不会触发校验
• 表单不能设置 novalidate 属性，否则整个原生验证被禁用

避免常见绕过校验的操作

以下写法会让 required 完全失效，气泡不会出现：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 在 form.addEventListener('submit', e => { e.preventDefault(); ... }) 中阻止默认行为后，没手动调用 reportValidity()
• 用 form.submit() 方法提交 —— 这是纯 JS 提交，不触发任何内置校验
• 用 绑定点击事件，未关联表单提交机制
• 把 required 加在不支持的元素上，比如 、
  或自定义组件

  让 required 真正“被识别”的细节

  即使结构正确，这些情况也会导致校验失败或气泡不弹出：

  • 的第一个 的 value="" 且未设 disabled —— 浏览器认为“已选中空值”，立刻报错
  • 用户只输入空格、制表符或零宽字符（如 \u200B），.value.trim() === "" 仍为真，校验失败
  • 动态插入的控件（如通过 JS 创建后 append 到 form），需确保 required 属性在 DOM 挂载完成后才设置，否则属性可能未被解析
  • 控件设置了 display: none 或 visibility: hidden —— 浏览器跳过校验（但 hidden 属性不影响）

  需要手动触发时用 reportValidity()

  如果必须用 JS 控制提交流程，又想保留原生气泡，不要用 checkValidity()（它只返回 true/false，无界面反馈），而应调用：

  • form.reportValidity()：检查整个表单，聚焦首个无效字段，显示气泡
  • input.reportValidity()：只检查该控件，同样会高亮+弹提示
  • 调用前确保控件有校验属性（如 required）、未禁用、已挂载到 document、且表单未设 novalidate

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