是否有与HTML5中的Web浏览器表单验证相关的JavaScript属性？

Question

在HTML5中，客户端验证应通过pattern或required等属性成为网络浏览器的工作。

是否只有这样的CSS实现（即:valid和:invalid选择器，以向用户提供反馈）还是还有JavaScript实现？

我正在考虑一种功能，如果用户点击提交并且表单中包含无效值，则允许调用JavaScript函数。或者我可以在表单对象中访问的标志，以显示它是否有错误。

感谢。

Answer 1

是的，您可以查询validity属性。见http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-cva-validity

我不知道目前在浏览器中存在多少支持。

Answer 2

是的，确实如此，它目前有效。请参阅Ryan Seddon关于此主题的A List Apart's优秀文章。根据文章，Chrome 4 +，Safari 5+和Opera 9.6+都支持这些属性。 （他还包括an example。）

引用文章，您可以执行以下操作：

input:focus:required:invalid {
  background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
  background-color: #fff;
  background-position: 379px -61px;
}

当输入验证时，它将显示一个图标，当它失效并聚焦时，它将显示另一个图标。