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;
}
}

Kendo UI Validator 概述的更多相关文章

  1. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  2. Kendo UI 特效概述

    Kendo UI 特效概述 Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成 HTML 元素的过渡显示.每种特效近可能的使用 CSS Transition ,对于一些老版 ...

  3. Kendo UI 模板概述

    Kendo UI 模板概述 Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎.通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HT ...

  4. Kendo UI Widgets 概述

    UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...

  5. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  6. Kendo UI开发教程(8): Kendo UI 特效概述

    Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...

  7. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  8. Kendo UI开发教程(6): Kendo DataSource 概述

    Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...

  9. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. 获取iOS应用中当前处于Activity状态的ViewController

    转自:http://blog.csdn.net/lixuwen521/article/details/41447507 // 获取当前处于activity状态的view controller - (U ...

  2. <正则吃饺子> :关于redis集群的测试demo

    redis集群的测试demo,来自网络,具体不详. 1.下载地址,如下:http://download.csdn.net/detail/u012543819/9729291 2.项目是java项目,结 ...

  3. Hibernate&nbsp;Session的delete()方法

    本文介绍Hibernate Session的delete()方法.delete()方法用于从数据库中删除与Java对象对应的记录.对应游离对象和持久化对象,delete语句会做出不同的反应. AD:  ...

  4. 提取html里面url()导入的图片正则表达式

    之前写过一次,后来无意发现还是有问题,比如 <a onclick="openZoosUrl('chatwin','param'); 这个click事件函数里面就有url()部分,造成了 ...

  5. 【机器学习】决策树C4.5、ID3

    一.算法流程 step1:计算信息熵 step2: 划分数据集 step3: 创建决策树 step4: 利用决策树分类 二.信息熵Entropy.信息增益Gain 重点:选择一个属性进行分支.注意信息 ...

  6. FormsAuthentication.Signout不能清楚服务器端cookie

    具体信息可以参考文章 https://support.microsoft.com/en-us/help/900111/the-formsauthentication.signout-method-do ...

  7. lvs squid相关

    http://zh.linuxvirtualserver.org/ 这几天在要对用户请求过来的post 的body内容进行处理,就具体了解了一下squid 处理post请求的具体流程,在这里具体分享一 ...

  8. Ubuntu 16 Mysql 安装配置

    安装Mysql   apt-get update;   apt-get install mysql-server apt-get install mysql-client //安装过程中会提示修改密码 ...

  9. 在Packstack环境手动安装OVN

    安装OpenStack(allinone)环境 ### 参考"Packstack使用"章节安装,但是不要配置外网网络 安装OVN组件 ### 控制节点 # yum install ...

  10. Jsoncpp写“鱘”的json数据,报错。

    最近在用Json::FastWriter生成json数据时,发现一个问题.含有“鱘”字的json字段会多出一个斜杠,不知道是不是编码的问题. C++要使用JSON来解析数据,一般采用jsoncpp. ...