javascript - 检测伪类：来自javascript的无效

Question

有没有办法通过Javascript检测元素:invalid上伪类的“外观” ？input

换句话说，当:invalid伪类出现在input元素上时，如何触发一些Javascript代码运行？

Answer 1

有一个可以触发的无效事件可以监听。

当可提交元素已被检查且不满足其约束时，将触发 invalid 事件。在提交其所有者表单之前或在调用元素或其所有者表单的 checkValidity() 之后检查可提交元素的有效性。

https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/invalid

您还可以访问一些属性来检查元素的有效性，如果这更多是您所追求的。

.validity.valid

该元素满足所有约束验证，因此被认为是有效的。

https://developer.mozilla.org/en-US/docs/DOM/ValidityState

编辑：自从我回答了这个问题后，我学到了一些东西......

这.validity.valid实际上是约束Constraint Validation API的一部分，并且对它的支持充其量只是参差不齐，这太糟糕了（该 API 中有很多很棒的东西）。

但是，似乎运行良好的是querySelectorAll(':invalid')，它返回当前无效的所有表单元素的非活动 NodeList。您可以addEventListener('change'在表单元素上调用 ..etc 等，并在触发时查询有效性。