Kendo UI Validator 概述

Kendo UI Validator 概述

Kendo UI Validator 支持了客戶端校驗的便捷方法，它基于 HTML 5 的表單校驗功能，支持很多內(nèi)置的校驗規(guī)則，同時也提供了自定義規(guī)則的便捷方法。

HTML 5 表單校驗

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

必填域

• 正規(guī)表達(dá)式規(guī)則
• 最大，最小值域
• HTML 5 數(shù)據(jù)類型（ 如 EMail， URL，數(shù)值等）
• 為了使用這些規(guī)則，可以通過為HTML輸入添加對應(yīng)的屬性的方法來設(shè)置。比如：

<input type="email" required>

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

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

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

Kendo UI Validator 的基本配置

Kendo UI Validator 支持標(biāo)準(zhǔn)的 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 應(yīng)用可以完全控制錯誤信息的顯示和其顯示風(fēng)格，當(dāng)點擊「Save” 按鈕后，如果輸入不滿足輸入規(guī)則，Kendo UI Validator 顯示合適的錯誤信息， 每個 HTML 元素也可以通過 validatorMessage 定義一個自定義的錯誤信息，比如：

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

預(yù)設(shè)支持的校驗規(guī)則

輸入項必填規(guī)則

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

輸入必須符合指定的正規(guī)表達(dá)式

<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 也支持自定義的規(guī)則。

自定義規(guī)則

使用自定義規(guī)則時的注意事項：

• 表單的每個元素都會執(zhí)行自定義規(guī)則，因此如果表單中有多個輸入項，注意檢查輸入項的類型，然后再執(zhí)行合適的校驗規(guī)則，比如：

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

• 如果自定義規(guī)則返回 true,那麼表示校驗成功。

• 如果有多個自定義規(guī)則，那麼會按屬性執(zhí)行這些自定義規(guī)則，在發(fā)生錯誤時停止后續(xù)校驗規(guī)則的執(zhí)行，而是顯示錯誤信息。只有所有規(guī)則都通過才表示表單校驗成功。
• 自定義錯誤信息必須和自定義規(guī)則匹配，如果沒有定義自定義錯誤信息，則顯示一個簡單的出錯圖標(biāo)。

自定義輸入提示的位置

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

比如：

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