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

Posted 2023-02-22

【中文标题】一种检查 HTML5 表单有效性的方法？

【英文标题】：a way to check validity of HTML5 forms?

【发布时间】：2011-08-16 07:49:16

【问题描述】：

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

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

【参考方案1】：

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

inputElement.checkValidity() 返回 true 或 false inputElement.validity 返回有效性状态对象。 inputElement.validity.valid 返回true/false

除了使用 keyup 之外，您还可以使用 'input' 事件。所有实现了约束验证API的浏览器也都实现了input-event。

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

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

【讨论】：

嗯，我只是想要一个向后兼容的 checkValidity 插件。似乎你的库有太多内置函数，文档很难阅读。

我认为change事件更适合有效性检查。

有没有办法在 HTML 模式中使用标志（例如i）？

【参考方案2】：

您可以使用pattern attribute。

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

jsFiddle.

但是，请确保在服务器端再做一次。

另外请注意，由于现在浏览器兼容性很差，JavaScript 是验证客户端的标准。

【讨论】：

谢谢，我尽量避免使用任何框架，并且我的模式属性已经设置好了。我希望我可以通过 DOM 访问输入元素并确定该元素是否为值。

是的，我知道 :) 我已经进行了相同的设置，我想避免使用任何 JQuery 表单验证器。我知道我可以设置对我有效的模式或类型。我已经这样做了。但是一旦输入元素有效，我想调用函数。我正在收听元素上的“onKeyUp”事件，但无法验证它们实际上是否有效。我有 CSS 来传达元素的有效性，但这还不够。

@Henry 你可以遍历input 元素，提取它们的pattern 属性并测试生成的正则表达式。

是的 - 这正是我想要避免的 :) 我确实想通了：function checkValid() document.getElementById('email').validity.valid; ;适用于 Chrome 和 ios 4.3 :) 感谢 Alex！

@Henry 啊，是的，我在那里看到了那个属性，正要提到它:)

【参考方案3】：

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

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

【讨论】：

这将把焦点放在最后一个元素上。我的意思是，第一个然后是第二个，然后是第 N 个，然后是最后一个。我想你是对的，它会将它设置在第一个元素上——如果第一个元素也是最后一个元素，甚至将注意力集中在第一个元素上。你可以使用querySelector 来避免这一切。