Kendo UI Validator 概述
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;} }
转载于:https://www.cnblogs.com/miaosj/p/10362015.html
Kendo UI Validator 概述相关推荐
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI(一):Kendo UI Validator
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
- Kendo UI开发教程:Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaS ...
- Kendo UI:概述(*)
简介 虽说如今业界的各种前端框架层出不穷,但在为后台管理系统选择前端框架的时候却经常陷入纠结. 而从笔者实践经验来看,KendoUI算是一个不错的选择,总结起来其优点有三 各种组件和功能都比较完善 文 ...
- 看Kendo UI文档
看完了Kendo UI的文档,感觉kendo UI就是简化了JS的许多内容,书写更加容易,文档里没找到treeview,去百度再找找看. 重点DataSource,Grid: 记:控制远程数据源: v ...
- Telerik Kendo UI 那点事【2】中文化(汉化)
CSDN上有一个引路蜂软件的博客,里面有kendo ui的一般用法.它那里讲过的我这里就不再继续重复. 由于框架设计的需要,后台使用spring,前台使用kendo ui构建页面.为了加快快发速度以及 ...
- UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
- Kendo UI:简介
目前移动HTML5带UI的开发框架层出不穷,常见的有Sencha Touch.jQuery Mobile前者效果较好,收费,学习成本高:后者效果一般,但兼容性好,免费,学习成本低,会jquery的同学 ...
最新文章
- LeetCode简单题之二进制矩阵中的特殊位置
- 神经网络二(Neural Network)
- onTouchEvent
- yum go linux,使用yum安装Go(Golang)
- Hotstar赛事直播编码组合优化
- java web开发技术大_2021年六大javaweb开发主流技术
- mongodb 导入 mysql_将mongodb 数据指定字段导出,然后指定字段导入mysql 实例 及相关问题解决...
- slice 定义和用法
- python论坛签到_Python实现某论坛自动签到功能
- 被占满_关晓彤在家做饭暴露豪宅内景,冰箱占满一整面墙,酒柜比人还要高
- thinkphp-where-字符串条件
- fatal error: X11/extensions/Xvlib.h/Xdbe.h: No such file or directory
- 2022百度之星程序设计大赛 - 初赛 - 第二场 1001 和
- 微信小程序商城项目实战(第三篇:商品列表)
- 【Unity3D插件】FancyScrollView插件分享《通用UI滑动列表》
- QuickCHM 2.6中“不支持此接口”错误的解决
- Android 从系统媒体库中选择视频
- OpenCV:vector subscript out of range
- java输出和读取CSV格式文件
- 算法题(六十二)头条2017年笔试题——头条校招