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

Question

是否可以根据我为其设置的模式检查 html5 表单的输入元素是否有效？我知道伪类的东西..但我希望是这样的：

document.getElementById('petitionName').valid

可以返回

true

或

false

..

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

Answer 1

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

1. inputElement.checkValidity()

   返回

   true

   或

   false

2. inputElement.validity

   返回有效性状态对象。

   inputElement.validity.valid

   返回

   true/false

除了使用 keyup，您还可以使用 'input' 事件。所有实现了约束验证 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();
    }
}

Answer 4

inputElement.checkValidity()

返回布尔值，但如果您正在处理表单较多的页面，我会考虑使用像 forms.js 这样的包来处理客户端验证。