檢查 HTML5 forms 有效性的方法？

Question

是否可以根據我為其設置的模式檢查 html5 表單的輸入元素是否有效？ 我知道偽 class 的東西.. 但我希望類似： document.getElementById('petitionName').valid可以返回true或false ..

我真的希望我不需要創建 javascript 來重新驗證這些東西。

Answer 1

有兩種方法可以檢查有效性。

1. inputElement.checkValidity()返回true或false
2. inputElement.validity返回有效性狀態 object。 inputElement.validity.valid返回true/false

除了使用 keyup，您還可以使用 'input' 事件。 所有實現了約束驗證 API 的瀏覽器也實現了輸入事件。

如果您使用上面的選項 1，Opera 會在此處出現錯誤，並會顯示其驗證提示。 所以你應該使用2。

我創建了一個 html5 forms 庫，它為無法使用的瀏覽器實現了所有未知功能 + 修復了 HTML5 瀏覽器中的問題。 所以一切都像規范中定義的那樣工作，但它建立在 jQuery 之上。 （ http://afarkas.github.com/webshim/demos/index.html ）。

Answer 2

您可以使用pattern屬性。

它將在客戶端驗證它，因此無需在客戶端再次驗證它。

js小提琴。

但是，請確保您在服務器端再次執行此操作。

另請注意，由於目前瀏覽器兼容性很差，JavaScript 是驗證客戶端的標准。

Answer 3

作為補充，您可以檢查每個元素是否無效，例如，通過以下代碼在第一個無效元素中設置焦點：

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