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

Question

在HTML5中,客户端验证应该通过像pattern或等属性成为Web浏览器的工作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

是的,确实如此,它目前有效.参见A List Apart关于Ryan Seddon关于这一主题的优秀文章.根据文章,Chrome 4 +,Safari 5+和Opera 9.6+都支持这些属性.(他还包括一个例子.)

引用文章,您可以做以下事情:

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

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