html5表单验证应检测checkvalidity方法是否存在，而非虚构的supportsvalidity；所有支持浏览器均在input或form元素上暴露该方法，且调用后返回false并触发:invalid伪类才表明真正支持。
HTML5 表单验证不依赖 supportsValidity 方法——它根本不存在。 你查不到这个方法，是因为浏览器 DOM API 里压根没定义它。想检测表单验证能力，得用更实际、更可靠的方式。
怎么判断浏览器是否支持 HTML5 表单验证
真正的检测点是 checkValidity 方法是否存在，而不是虚构的 supportsValidity。所有现代浏览器（包括 IE10+）只要支持原生验证，就一定在 HTMLInputElement 和 HTMLFormElement 上暴露 checkValidity。
- 直接检查某个 input 元素：
typeof document.createElement('input').checkValidity === 'function' - 更稳妥的做法是检查 form 元素：
typeof document.createElement('form').checkValidity === 'function' - 不要用
'checkValidity' in input，IE10 下可能返回false即使方法可用 - 不需要检测
validity属性——只要checkValidity存在，validity对象就一定存在且可读
为什么不能用 oninvalid 或 invalid 事件来“检测支持”
oninvalid 属性或 invalid 事件监听器的存在，**不等于验证功能可用**。它们只是事件钩子，即使浏览器不支持验证，你也照样能绑定这些事件——但它们永远不会触发。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
input.addEventListener('invalid', handler)在不支持验证的旧浏览器中不会报错，但 handler 永远不会执行 - 试图靠监听
invalid事件后手动调用checkValidity()来“触发验证”，是无效的：验证只在提交时或显式调用checkValidity()/reportValidity()时发生 - 真正可靠的信号只有：调用
checkValidity()后返回false，且元素上出现:invalid伪类样式变化
兼容性兜底时该做什么
如果你的项目还要支持 IE9 或更老环境，别费劲“检测验证支持”，直接降级到 JS 手动校验逻辑即可。HTML5 验证不是渐进增强的装饰，而是有明确分水岭的功能。
- IE9 及以下：
checkValidity为undefined，validity为undefined，required等属性被忽略 - 检测到不支持时，应完全绕过 Constraint Validation API，改用正则 +
value判空等传统方式 - 不要混合使用：比如在 IE9 里还留着
required属性却没 JS 校验，会导致必填项完全无约束 -
reportValidity()是较新 API（Chrome 40+/Firefox 38+），比checkValidity()晚几年，检测时需单独判断
真正容易被忽略的点是：验证支持不是布尔开关，而是一组行为集合——checkValidity() 返回值、:valid/:invalid 伪类生效、setCustomValidity() 能否覆盖默认提示、reportValidity() 是否弹出 UI。只测一个点，很容易误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
