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

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`	`var validator = $("#myform").kendoValidator().data("kendoValidator");`

4

`5`	`// Validate the input when the Save button is clicked`

`6`	`$("#save").on("click", function() {`

`7`	`if (validator.validate()) {`

`8`	`// If the form is valid, the Validator will return true`

9 save();

10 }

11 });

使用这样的简单配置，这些HTML5 表单校验在旧版本浏览器中也可以工作，并且Web应用可以完全控制错误信息的显示和其显示风格，当点击“Save” 按钮后，如果输入不满足输入规则，Kendo UI Validator显示合适的错误信息，每个HTML元素也可以通过validatorMessage定义一个自定义的错误信息，比如：

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

缺省支持的校验规则

输入项必填规则

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

输入必须符合指定的正规表达式

`1`	`<input` `type="text"` `name="twitter"` `pattern="https?://(?:www\.)?twitter\.com/.+i"` `/>`

最大，最小值限制

`1`	`<input` `type="number"` `name="age"` `min="1"` `max="42"` `/>`

输入步骤和最大，最小值限制一同使用

`1`	`<input` `type="number"` `name="age"` `min="1"` `max="100"` `step="2"` `/>`

输入为有效的URL

`1`	`<input` `type="url"` `name="url"` `/>`

输入为有效的EMail

`1`	`<input` `type="email"` `name="email"` `/>`

除此之外，Kendo UI Validator也支持自定义的规则。

自定义规则

使用自定义规则时的注意事项：

表单的每个元素都会执行自定义规则，因此如果表单中有多个输入项，注意检查输入项的类型，然后再执行合适的校验规则，比如：

`1`	`custom: function (input) {`

`2`	`if (input.is("[name=firstName]")) {`

`3`	`return input.val() === "Test"`

`4`	`} else {`

`5`	`return true;`

6 }

7 }

如果自定义规则返回true,那么表示校验成功。
如果有多个自定义规则，那么会按属性执行这些自定义规则，在发生错误时停止后续校验规则的执行，而是显示错误信息。只有所有规则都通过才表示表单校验成功。
自定义错误信息必须和自定义规则匹配，如果没有定义自定义错误信息，则显示一个简单的出错图标。

自定义输入提示的位置

缺省情况下Kendo UI 将输入提示显示在输入框附近，然而，如果输入通过Kendo UI插件转换为ComboBox ，AutoComplete 或其它Kendo UI组件后，缺省的输入提示可能会影响到某些重要信息的显示，这时，你可以指定在什么地方显示输入提示，这时，可以通过添加一个span元素，定义data-for 属性到需要校验的输入框的name, 并添加 .k-invalid-msg 类。

比如：

`1`	`custom: function (input) {`

`2`	`if (input.is("[name=firstName]")) {`

`3`	`return input.val() === "Test"`

`4`	`} else {`

`5`	`return true;`

6 }

7 }

« Kendo UI开发教程(8): Kendo...