Kendo UI开发教程 9 Kendo UI Validator 概述

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

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

完整的Kendo UI 的Validator可以参见API 文档。

HTML 5 表单校验

HTML5 的一项重要功能是HTML 5 表单校验属性， 通过设置限制属性为HTML输入设置输入类型，值域等，然后由浏览器来检查输入是否合法。 支持的几种规则有：

• 必填域
• 正规表达式规则
• 最大，最小值域
• HTML 5 数据类型（ 如EMail， URL，数值等）

为了使用这些规则，可以通过为HTML输入添加对应的属性的方法来设置。比如：

1	<input type="email" required>

如果浏览器支持HTML5，则它会自动根据这些规则来检查输入的值是否符合规则，如果输入数据无效，浏览器会显示错误信息给用户，也不会提交表单。HTML5 也支持了一些新添的JavaScript方法来实现手工校验，比如checkValidity()方法。

HTML 5表单校验存在的问题

HTML5 表单校验非常有用，但它也存在一些问题，比如：

• 一些旧版本浏览器不支持HTML5.
• 某些支持HTML5的浏览器对HTML 5表单支持不完整。
• 由浏览器生成的错误信息很难为它们重新定义显示风格。

Kendo UI Validator就是为了解决上面的这些问题而实现的。

Kendo UI Validator的基本配置

Kendo UI Validator支持标准的HTML5表单校验属性，从而允许你正常使用HTML 5表单校验属性，从而可以在所有浏览器（IE7+）上使用这些属性，比如：

1	<div id="myform">

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

3	<input type="text" name="lastName" required />

4	<button id="save" type="button">Save</button>

5

</div>

然后，在页面上添加Kendo UI Validator，添加在Script部分，比如：

1	// Initialize the Kendo UI Validator on your "form" container

2	// (NOTE: Does NOT have to be a HTML form tag)

3