唯一能自动唤起原生气泡提示的是用 或 触发表单提交；其他方式如 form.submit()、onclick 绑定或 event.preventDefault() 均跳过校验，需用 reportValidity() 手动触发。
直接用 <button type="submit"></button> 或 <input type="submit"> 触发表单提交，是唯一能自动唤起原生气泡提示的方式。其他操作（比如 JS 调用 form.submit()、绑定 onclick、或用了 event.preventDefault()）都会跳过校验。
确保表单结构和提交方式正确
浏览器只在原生 submit 事件中执行 required 校验并显示气泡。必须满足三个基本条件：
- 输入控件（
<input>、<select></select>、<textarea></textarea>）放在<form></form>标签内 - 提交按钮必须是
<button type="submit"></button>或<input type="submit">；<button></button>默认是type="button"，不会触发校验 - 表单不能设置
novalidate属性，否则整个原生验证被禁用
避免常见绕过校验的操作
以下写法会让 required 完全失效，气泡不会出现：
- 在
form.addEventListener('submit', e => { e.preventDefault(); ... })中阻止默认行为后，没手动调用reportValidity() - 用
form.submit()方法提交 —— 这是纯 JS 提交，不触发任何内置校验 - 用
<button onclick="doSubmit()"></button>绑定点击事件，未关联表单提交机制 - 把 required 加在不支持的元素上，比如
<input type="hidden">、<div contenteditable> 或自定义组件 <h3>让 required 真正“被识别”的细节</h3> <p>即使结构正确，这些情况也会导致校验失败或气泡不弹出：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li> <code><select></select>的第一个<option></option>的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
