（9）kendo UI使用基础介绍与问题整理——Validator/基础说明、实例介绍

一、基本使用方法介绍

    官网链接地址 demo：https://demos.telerik.com/kendo-ui/validator/index

                           文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/validator

    简单demo：供参考

<form id="myform">
    <input name="username" required /> <br />
    <input type="email" name="userEmail" required data-message="My custom email message" /> <br />
    <button>Validate</button>
</form>

<script>
    $("#myform").kendoValidator({
         messages: {
             // defines a message for the 'custom' validation rule
             custom: "Please enter valid value for my custom rule",

             // overrides the built-in message for the required rule
             required: "My custom required message",

             // overrides the built-in message for the email rule
             // with a custom function that returns the actual message
             email: function(input) {
                 return getMessage(input);
             }
         },
         rules: {
           custom: function(input) {
             if (input.is("[name=username]")) {
                 return input.val() === "Tom";
             }
             return true;
           }
         }
    });

    function getMessage(input) {
      return input.data("message");
    }
</script>

 

二、实例介绍

项目中主要用到验证的部分，肯定是填写表格的部分，下面是代码展示：

1、必填验证

html:

<input type="text" maxlength = "30" spellcheck = "false" required errmsg="请填写联系信息">  

 

JS:

kendo.ui.validator.rules.required = function (element) {//必填
    if ($(element).is('input') && element.is('[required]')) {
        return $.trim(element.val()) != "";//过滤空格
    }
    else if ($(element).is('select') && element.is('[required]')) {
        return element.val() != "" && element.val() != "0" && element.val() != null;
    }
    else if ($(element).is('textarea') && element.is('[required]')) {
        return $.trim(element.val()) != "";
    }
    return true;
};

kendo.ui.validator.messages.required = function (input) {//必填报错提示
    var err = input.attr('errMsg');
    return kendo.format("{0}", err);
};

2、输入格式验证：

举例电子邮件

Html：

<input maxlength="30" patterntype="email" spellcheck="false" type="text">

 

JS：

kendo.ui.validator.rules.email = function (input) {//电子邮件
    if (input.attr("patternType") == "email" && input.val() != "") {
        var regEmail = /[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var count = input.val().split('@').length - 1;
        return (regEmail.test(input.val())&& (count < 2));
    }
    return true;
}

kendo.ui.validator.messages.email = function (input) {//重定义email格式报错提示
    return kendo.format("电子邮件格式不正确");
};

 

3、输入长度验证

Html:

<input datalength="30" spellcheck="false" type="text">

JS：

kendo.ui.validator.rules.dataLength = function (input) {//最大长度
    if (input.is('[dataLength]')) {
        return input.val().length <= input.attr('dataLength');
    }
    return true;
};
kendo.ui.validator.messages.dataLength = function (input) {//超过长度提示
    var len = input.attr('dataLength');
    return kendo.format("最大长度不能超过{0}", len);
};

 

可以根据自己的需要，进行自定义验证的规则。

 

4、提交验证：

 var OwnersForm = $("#Form");
    Form.kendoValidator({
        validateOnBlur: true
    });

    //保存
    $("#save").bind('click', function () {
        var validator = Form.kendoValidator().data("kendoValidator");
        if (validator.validate()) {
      //执行保存。。。
}

 

差不多就是这些吧，最近很懒，kendo我真是不太喜欢，不过依然要好好使用它，帮我把项目做好。

越长大越发现，坚持是一件很了不起的事情！欢迎指点批评！