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

Question

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

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

Answer 1

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

1. inputElement.checkValidity()返回true或false
2. inputElement.validity返回validity-state对象。 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 attribute。

它将验证客户端，因此无需再次验证客户端。

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();
    }
}