Question

HTML5规范定义了一些非常有趣的验证组件，包括pattern（用于验证Regexp）和required（用于将字段标记为 required ）。但是，据我所知，没有浏览器实际上根据这些属性进行任何验证。

我找到了comparison of HTML5 support across engines，但没有关于验证的信息。在我尝试过的浏览器中（Firefox 3.5.8和Safari 4.0.4），没有对象有checkValidity()方法，所以即使我可以定义它们，也无法运行验证。

有没有对此功能的支持，所以我可以试验一下？

Answer 1

不确定。歌剧和Chromium。但你可以自己测试一下：

function supportsValidity(){
  var i = document.createElement('input');
  return typeof i.validity === 'object'
}

以下是沙盒的链接，您可以在其中看到Opera和Chrome的运行情况： http://jsfiddle.net/vaZDn/light/

Answer 2

我在Google Chrome中测试了以下内容：

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>
    <div id="output"></div>
    <script>
      function check(input) {
        var out = document.getElementById('output');
        if (input.validity) {
          if (input.validity.valid === true) {
            out.innerHTML = "<span class='valid'>" + input.id +
                            " is valid</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id +
                            " is not valid</span>";
          }
        }
        console.log(input.checkValidity());
      };
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Required:
        <input oninput="check(this)" id="required_input" 
               required />
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input oninput="check(this)" id="pattern_input" 
               pattern="[0-9][A-Z]{3}"/>
      </label><br>
      <label>Min (4):
        <input oninput="check(this)" id="min_input" 
               type=number min=4 />
      </label><br>
    </form>
  </body>
</html>

Stangely，<element>.validity.valid属性似乎正常工作，但调用<element>.checkValidity()总是返回true，所以它看起来还没有实现。

Answer 3

checkValidity（）可以作为整体表单或单个输入使用。

<小时/> “此外，checkValidity（）方法可以在单个字段或整个表单上执行，并返回true或false。执行该方法还将以编程方式触发所有无效字段的无效事件，或者，如果在单个字段，仅适用于该元素。“

取自List Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/

<小时/> “form.checkValidity（）如果表单的控件全部有效，则返回true;否则返回true。否则，返回false。“ http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

“valid = element.checkValidity（）如果元素的值没有有效性问题，则返回true;否则是假的。在后一种情况下，在元素处触发无效事件。“ http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation

W3C--工作草案。

Answer 4

根据Dive into HTML5：

当Opera用户尝试提交带有字段的表单时，即使禁用了脚本，Opera也会自动提供符合RFC的电子邮件验证。 Opera还提供对输入到字段中的Web地址和字段中的数字的验证。数字验证甚至考虑了最小和最大属性，因此如果您输入的数字太大，Opera将不允许您提交表单。

（引用的段落是文章中的最后一段。）

据我所知 - 并且考虑到我没有使用Opera 10进行测试，我正在接受他们的话 - 没有其他浏览器可以自动验证表单。

Answer 5

Opera 10有一些HTML5表单验证http://dev.opera.com/articles/view/improve-your-forms-using-html5/。但是，我认为它没有checkValidation（）。

Answer 6

如果你的意思是checkValidity（）那么，是的，Opera支持它。

Disclosurey thang：我为Opera工作。

是否有任何浏览器支持HTML5的checkValidity（）方法？

6 个答案: