任何瀏覽器是否還支持HTML5的checkValidity（）方法？

HTML5規範定義了一些非常有趣的驗證組件，包括pattern（用於驗證Regexp）和required（用於將字段標記爲要求）。然而，盡我所知，沒有瀏覽器實際上根據這些屬性進行任何驗證。任何瀏覽器是否還支持HTML5的checkValidity（）方法？

我發現了一個comparison of HTML5 support across engines，但沒有關於驗證的信息。在我嘗試過的瀏覽器（Firefox 3.5.8和Safari 4.0.4）中，沒有任何對象具有checkValidity()方法，所以即使可以定義它們，我也無法運行驗證。

有沒有這個功能的支持，所以我可以試驗？

來源

2010-03-10 James A. Rosen

我測試了谷歌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，所以它看起來像是一個尚未實現。

來源

2010-03-10 23:12:50

你需要調用checkValidity的形式，而不是投入上 – miketaylr 2010-03-11 01:25:26

你在哪裏看到的HTTP。。。？ //dev.w3.org/html5/spec/Overview.html說checkValidity是HTMLObjectElement上的一個成員函數，並且：「當調用checkValidity（）方法時，如果該元素是約束驗證的候選者......用戶代理必須激發一個名爲invalid的簡單事件，該事件可以在元素處取消...並返回false。「相同規範將」約束驗證的候選對象「定義爲」列出的與表單關聯的元素是約束驗證的候選對象，除非條件禁止約束驗證中的元素。「似乎應用了輸入。 – 2010-03-11 07:02:51

我的理解是在表單上調用checkValidity（）將簡單地依次委託給它的每個'input's（和'select's'和'textarea's），但我不能說我真的有一個參考 – 2010-03-11 14:11:04

根據Dive into HTML5：

當Opera的用戶嘗試提交表單與場，歌劇院自動提供符合RFC的電子郵件驗證，即使禁用腳本。 Opera還提供對輸入字段的網址和字段中的數字進行驗證。數字驗證甚至考慮到最小和最大屬性，所以如果您輸入的數字太大，Opera不會讓您提交表單。

（所引用的一段是關於過去的文章。）

到目前爲止我所知 - 和銘記我沒有使用Opera 10測試，我要帶他們的話因爲它沒有其他瀏覽器自動驗證表單。

來源

2010-03-10 22:47:03

Opera 10有一些HTML5表單驗證http://dev.opera.com/articles/view/improve-your-forms-using-html5/。但是，我不認爲它有checkValidation（）。

來源

2010-03-10 22:52:34 Adam

當然。歌劇和鉻。但是你可以檢驗一下自己：

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

下面是沙盒，你可以看到Opera和Chrome瀏覽器中操作的鏈接： http://jsfiddle.net/vaZDn/light/

來源

2010-03-11 01:19:46 miketaylr

也適用於firefox 4.0 .1 – 2011-05-08 18:34:36

也可以在IE 10中工作 – Johannes 2013-08-07 20:33:56

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

信息披露thang：我爲Opera工作。

來源

2011-11-23 14:57:25 bruce

既然你在那裏工作......任何機會你都可以在上面的評論線索中看到一些東西......是否它應該在父表單上工作？ http://stackoverflow.com/questions/2421218/do-any-browsers-yet-support-html5s-checkvalidity-method#comment2405975_2421394 – 2012-01-31 16:37:12

checkValidity（）支持在表單上作爲整體或獨立輸入。

「此外，checkValidity（）方法可以在單個字段或整個表單上執行，並返回true或false。執行該方法還將以編程方式觸發所有無效字段的無效事件，或者if僅在單個字段上執行，僅適用於該元素。「
從除了列表採取

- http://www.alistapart.com/articles/forward-thinking-form-validation/

「的形式。checkValidity（）如果表單的控件全部有效，則返回true;否則返回錯誤「 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 - 工作草案

來源

2012-10-12 15:22:15 cpi

任何瀏覽器是否還支持HTML5的checkValidity（）方法？

回答

相關問題