logo标签列表

有没有浏览器已经支持HTML5的checkValidity()方法？

javascriptvalidationhtmlbrowser
12
HTML5规范定义了一些非常有趣的验证组件，包括pattern（用于根据正则表达式进行验证）和required（用于将字段标记为必填）。但是据我所知，目前没有任何浏览器基于这些属性进行验证。
我找到了一个比较HTML5引擎支持情况的网站，但是那里没有关于验证的信息。在我试过的浏览器中（Firefox 3.5.8和Safari 4.0.4），没有对象具有checkValidity()方法，因此尽管我可以定义验证，但无法运行验证。
是否有任何支持此功能的浏览器，以便我可以进行实验？
6个回答
8
当然。Opera和Chromium都可以。但你可以自己测试一下：
function supportsValidity(){
  var i = document.createElement('input');
  return typeof i.validity === 'object'
}

这是一个链接，你可以在沙盒中看到Opera和Chrome的运行情况： http://jsfiddle.net/vaZDn/light/
6

我在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>

奇怪的是，<element>.validity.valid属性似乎能够正常工作，但调用<element>.checkValidity()总是返回true，因此看起来这个功能还没有实现。

1
你需要在表单上调用checkValidity，而不是在输入框上。 - miketaylr
2
你在哪里看到的？http://dev.w3.org/html5/spec/Overview.html说checkValidity是HTMLObjectElement的成员函数，并且：“当调用checkValidity()方法时，如果元素是约束验证的候选项...用户代理必须在元素上触发一个名为invalid的简单事件，该事件可取消...并返回false。”同一规范将“约束验证的候选项”定义为“列出的表单相关元素都是约束验证的候选项，除非某个条件已禁止该元素进行约束验证。”似乎适用于输入。 - Arne Roomann-Kurrik
我的理解是，在表单上调用checkValidity()将简单地依次委托给它的每个input（以及select和textarea），但我不能说我实际上有参考资料。 - James A. Rosen
那听起来很合理，但它也应该适用于输入。 - Arne Roomann-Kurrik
调用 checkValidity 只会触发一个事件，要检查实际的有效性，您必须处理元素上的 invalid 事件。 - robertc
Chrome现在支持“checkValidity()”。 - Derek 朕會功夫
4

checkValidity()方法可用于整个表单或单个输入字段。执行该方法会返回true或false，同时会为所有无效字段触发invalid事件，或者只针对单个字段执行此操作。

来自List Apart的内容 - http://www.alistapart.com/articles/forward-thinking-form-validation/

"form.checkValidity() 如果表单中的所有控件都有效，则返回true；否则，返回false。" http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

"valid = element.checkValidity() 如果元素的值没有有效性问题，则返回true；否则返回false。在后一种情况下，将在元素上触发invalid事件。" http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation


W3C - 工作草案。

3
根据深入理解HTML5：
当Opera用户尝试提交带有“email”字段的表单时，即使脚本被禁用，Opera也会自动提供符合RFC标准的电子邮件验证。 Opera还提供验证输入到“web地址”字段和“数字”字段中的网址和数字的功能。甚至考虑到数字的最小值和最大值属性进行数字验证，因此如果您输入的数字太大，Opera将不允许您提交表单。
（引用段落是关于该文章的最后一段。）
就我所知 - 并且请记住我还没有使用Opera 10进行测试，我相信他们的话 - 没有其他浏览器可以自动验证表单。
1
1
如果你是指checkValidity()，那么是的，Opera支持它。
声明一下：我在Opera工作。
2
既然你在那里工作，有没有可能给我们解释一下上面的评论线程……它是否应该在父表单上运行？https://dev59.com/Z3E95IYBdhLWcg3wMa51#unThnYgBc1ULPQZFtuJx - Tom Lianza
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接