一、基本使用方法介绍
官网链接地址 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-9u4e00-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我真是不太喜欢,不过依然要好好使用它,帮我把项目做好。
越长大越发现,坚持是一件很了不起的事情!欢迎指点批评!