直接调用 checkvalidity() 即可判断是否存在未填项，它依据 required、type、pattern 等约束统一校验，返回布尔值，作用于单个控件或整个 form，且不触发提示气泡。
直接调用 checkValidity() 就能知道有没有未填项
不用遍历所有字段，也不用手动判断 value 是否为空。浏览器原生提供 checkValidity() 方法，它会按 required、type、pattern 等约束统一校验，并返回 true 或 false。
这个方法作用在单个表单控件（如 <input>）或整个 <form></form> 元素上：
- 对单个
input调用：返回该字段是否满足所有约束（比如required但空着，就返回false） - 对
form元素调用：返回true当且仅当所有带约束的子元素都通过校验 - 注意：它不触发浏览器默认提示气泡，只做判断
reportValidity() 会弹提示，顺便告诉你哪几个没填
如果不仅要检测，还要立刻让用户看到错误位置和提示，就用 reportValidity()。它内部会先执行 checkValidity()，再对第一个失败的字段显示原生错误气泡（如“请填写此字段”），并自动聚焦过去。
常见误判点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对
form调用时，Chrome 会滚动到第一个错误字段，Firefox 不保证滚动 —— 别依赖视觉反馈做逻辑判断 - 如果某个字段已用
setCustomValidity("xxx")设置过自定义错误，reportValidity()会优先显示那个文案，而不是原生提示 - 调用后返回布尔值：
true表示全部通过，false表示至少一项失败
别靠 value === "" 判断 required 是否满足
浏览器判断“是否为空”的逻辑比字符串相等更严格，也更隐蔽：
-
<input type="text">和<textarea></textarea>：实际用.value.trim() === ""，所以只填空格、Tab 或零宽字符（如\u200B）也会被当成未填 -
<select></select>：看选中项的value属性是否为非空字符串；<option value="">请选择</option>默认选中就会触发required拒绝 -
<input type="number">：接受"123 "（尾部空格），但拒绝"abc"或纯空格 - 调试建议：在控制台执行
document.querySelector("input").value查原始值，比肉眼观察更准
submit 事件不触发，说明肯定有未填项
这是最轻量的间接检测方式：监听 form 的 submit 事件，如果没进回调函数，基本可以断定存在校验失败项（包括 required 未填、type="email" 格式错、pattern 不匹配等）。
但要注意边界情况：
- 如果
form上加了novalidate，所有原生校验失效，submit总会触发 - 用 JS 执行
form.submit()不会触发原生校验，也不会阻断提交 —— 这是主动绕过，不是漏项 - 用户可能用回车提交，也可能点
<button type="button"></button>触发 JS 提交，这两种都不走原生验证流程
真正可靠的“是否有未填项”，还是得回到 checkValidity() —— 它不依赖用户操作路径，也不受提交方式影响，只是很多人忘了它存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
