检查HTML5表单有效性的方法？

Question

是否可以根据我为其设置的模式检查html5表单的输入元素是否有效？我知道psuedo类的东西..但我希望类似的东西: document.getElementById('petitionName').valid 可以返回true或false..

我真的希望我不需要创建javascript来重新验证这些东西.

Answer 1

有两种方法可以检查有效性.

1. inputElement.checkValidity()返回true或false
2. inputElement.validity返回有效状态对象.inputElement.validity.valid回报true/false

您也可以使用'input'事件代替使用keyup.已实现约束验证API的所有浏览器也实现了输入事件.

如果您使用上面的选项1,Opera会在此处显示错误并显示其验证提示.所以你应该使用2.

我创建了一个html5表单库,它实现了无法浏览的所有未知功能+修复HTML5浏览器中的问题.所以一切都像规范中定义的那样工作,但它建立在jQuery之上.(http://afarkas.github.com/webshim/demos/index.html).

Answer 2

您可以使用该pattern属性.

它将验证它的客户端,因此无需再次验证客户端.

jsFiddle.

但是,请确保您再次在服务器端执行此操作.

另请注意,由于浏览器兼容性现在非常差,因此JavaScript是验证客户端的标准.

Answer 3

作为补充，您可以检查每个元素是否无效，例如，通过以下代码在第一个无效元素中设置焦点：

var Form = document.getElementById('FormID');
if (Form.checkValidity() == false) {
    var list = Form.querySelectorAll(':invalid');
    for (var item of list) {
        item.focus();
    }
}