Kendo UI Validator 支持了客戶端校驗的便捷方法,它基于 HTML 5 的表單校驗功能,支持很多內(nèi)置的校驗規(guī)則,同時也提供了自定義規(guī)則的便捷方法。
HTML5 的一項重要功能是HTML 5 表單校驗屬性, 通過設(shè)置限制屬性為 HTML 輸入設(shè)置輸入類型,值域等,然后由瀏覽器來檢查輸入是否合法。 支持的幾種規(guī)則有:
必填域
<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 支持標(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ī)則時的注意事項:
custom: function (input) {
if (input.is("[name=firstName]")) {
return input.val() === "Test"
} else {
return true;
}
}
如果自定義規(guī)則返回 true,那麼表示校驗成功。
自定義輸入提示的位置
預(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;
}
}
更多建議: