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

jerry Kendo UI 2015年11月25日 收藏

Contents

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

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

HTML 5 表单校验

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

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

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

<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+)上使用这些属性,比如:

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