离线下载
PDF版 ePub版

引路蜂 · 更新于 2018-11-28 11:00:43

Kendo UI Validator 概述

Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷方法。

HTML 5 表單校驗

HTML5 的一項重要功能是HTML 5 表單校驗屬性, 通過設置限制屬性為 HTML 輸入設置輸入類型,值域等,然後由瀏覽器來檢查輸入是否合法。 支持的幾種規則有:

  • 必填域
  • 正規表達式規則
  • 最大,最小值域
  • HTML 5 數據類型( 如 EMail, URL,數值等)
  • 為了使用這些規則,可以通過為HTML輸入添加對應的屬性的方法來設置。比如:


<input type="email" required>

如果瀏覽器支持 HTML5,則它會自動根據這些規則來檢查輸入的值是否符合規則,如果輸入數據無效,瀏覽器會顯示錯誤信息給用戶,也不會提交表單。HTML5 也支持了一些新添的 JavaScript 方法來實現手工校驗,比如 checkValidity()方法。

HTML 5 表單校驗存在的問題 HTML 5 表單校驗非常有用,但它也存在一些問題,比如:

一些舊版本瀏覽器不支持 HTML5. 某些支持 HTML5 的瀏覽器對 HTML 5 表單支持不完整。 由瀏覽器生成的錯誤信息很難為它們重新定義顯示風格。 Kendo UI Validator 就是為了解決上面的這些問題而實現的。

Kendo UI Validator 的基本配置

Kendo UI Validator 支持標準的 HTML5 表單校驗屬性,從而允許你正常使用 HTML 5 表單校驗屬性,從而可以在所有瀏覽器(IE7+)上使用這些屬性,比如:

<div id="myform">
    <input type="text" name="firstName" required />
    <input type="text" name="lastName" required />
    <button id="save" type="button">Save</button>
</div>

然後,在頁面上添加 Kendo UI Validator,添加在 Script 部分,比如:


// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");

// Validate the input when the Save button is clicked
$("#save").on("click", function() {
    if (validator.validate()) {
        // If the form is valid, the Validator will return true
        save();
    }
});

使用這樣的簡單配置,這些 HTML5 表單校驗在舊版本瀏覽器中也可以工作,並且 Web 應用可以完全控制錯誤信息的顯示和其顯示風格,當點擊「Save” 按鈕後,如果輸入不滿足輸入規則,Kendo UI Validator 顯示合適的錯誤信息, 每個 HTML 元素也可以通過 validatorMessage 定義一個自定義的錯誤信息,比如:


<input type="tel" pattern="\d{10}" validationMessage="Plase enter a ten digit phone number" />

預設支持的校驗規則

輸入項必填規則


<input type="text" name="firstName" required />

輸入必須符合指定的正規表達式


<input type="text" name="twitter" pattern="https?://(?:www\.)?twitter\.com/.+i" />

最大,最小值限制


<input type="number" name="age" min="1" max="42" />

輸入步驟和最大,最小值限制一同使用


<input type="number" name="age" min="1" max="100" step="2" />

輸入為有效的 URL


<input type="url" name="url" />

輸入為有效的 EMail


<input type="email" name="email" />

除此之外,Kendo UI Validator 也支持自定義的規則。

自定義規則

使用自定義規則時的注意事項:

  • 表單的每個元素都會執行自定義規則,因此如果表單中有多個輸入項,注意檢查輸入項的類型,然後再執行合適的校驗規則,比如:

custom: function (input) {
    if (input.is("[name=firstName]")) {
        return input.val() === "Test"
    } else {
        return true;
    }
}
  • 如果自定義規則返回 true,那麼表示校驗成功。
  • 如果有多個自定義規則,那麼會按屬性執行這些自定義規則,在發生錯誤時停止後續校驗規則的執行,而是顯示錯誤信息。只有所有規則都通過才表示表單校驗成功。
  • 自定義錯誤信息必須和自定義規則匹配,如果沒有定義自定義錯誤信息,則顯示一個簡單的出錯圖標。

自定義輸入提示的位置

預設情況下 Kendo UI 將輸入提示顯示在輸入框附近,然而,如果輸入通過Kendo UI插件轉換為 ComboBox ,AutoComplete 或其它 Kendo UI 組件後,預設的輸入提示可能會影響到某些重要信息的顯示,這時,你可以指定在什麼地方顯示輸入提示,這時,可以通過添加一個 span 元素,定義 data-for 屬性到需要校驗的輸入框的 name, 並添加 .k-invalid-msg 類。

比如:


custom: function (input) {
    if (input.is("[name=firstName]")) {
        return input.val() === "Test"  
    } else {
        return true;
    }
}