kendo-ui表单验证
摘要：
表单验证是每一个项目必不可少的，他能够帮助我们过滤不正确的用户输入，保证系统数据正确。例如下面这样：
kendo-ui也有自己的表单验证方法，下面就分享下kendo-ui的表单验证方式。
基本方法：
var validatable = $("#myform").kendoValidator().data("kendoValidator");
if (validatable.validate()) {
//表单验证通过
} else {
//表单验证未通过
}
表单验证规则与提示信息：
表单验证规则与提示信息有三种方式可以定义，下面我们就来看一下
第一种：放在页面上
<input type="text" pattern="^[A-Za-z0-9\.\-_@]+$" validationMessage='最多30个字符(支持英文数字.-_@)'>
这种方式适合提示信息由后端人员来写，当后端套页面时只要修改vMessage里面的值就可以了。
第二种：通用模块中
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);
};
这种方式适合定义通用验证规则，比如上面的限制最大长度。我们将上面的规则和提示信息放在公共模块中，在需要做验证规则的元素加上属性即可，如下
<input type="text" datalength="30">
第三种：放在验证函数中
validate: {
rules: {
reg: function(input){
var regex = '^[A-Za-z0-9\.\-_@]{0,30}$';
if(input.is('[reg]')){
return !input.val() || regex.test(input.val());
}
return true;
}
},
messages: {
reg: '最多30个字符(支持英文数字.-_@)'
}
}
这种方式适合提示信息由前端人员来定义，我们可以把提示信息放在一个全局对象中，方便维护。在定义表单验证时，只需要将规则对象传给函数即可，如下：
var validatable = $("#myform").kendoValidator(validate).data("kendoValidator");
if (validatable.validate()) {
}
小结：
每一种方法都有自己的优点，选择适合自己项目的方式来做表单验证。
附录：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="kendo/styles/kendo.common.min.css" />
<link rel="stylesheet" href="kendo/styles/kendo.metro.min.css" />
<link rel="stylesheet" href="kendo/styles/kendo.dataviz.min.css" />
<style>
.k-textbox {
width: 11.8em;
} .demo-section {
width: 800px;
padding: 0;
} #tickets {
width: 800px;
}
#tickets form {
padding: 30px;
margin-left: 150px;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
margin: 0;
padding: 0 0 20px;
} #tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 5px 0;
} label {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 10px;
} .required {
font-weight: bold;
} .accept, .status {
padding-left: 90px;
}
.confirm {
text-align: right;
} .valid {
color: green;
} .invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
<script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script> <div id="tickets">
<form class="k-content" id="ticketsForm">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
</li>
<li>
<label for="search" class="required">Movie</label>
<input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 200px;"/><span class="k-invalid-msg" data-for="search"></span>
</li>
<li>
<label for="time">Start time</label>
<select name="time" id="time" required data-required-msg="Select start time" style="width: 200px;">
<option>14:00</option>
<option>15:30</option>
<option>17:00</option>
<option>20:15</option>
</select>
<span class="k-invalid-msg" data-for="time"></span>
</li>
<li>
<label for="amount">Amount</label>
<input id="amount" name="Amount" type="text" min="1" max="10" value="1" required data-max-msg="Enter value between 1 and 10" style="width: 200px;" />
<span class="k-invalid-msg" data-for="Amount"></span>
</li>
<li>
<label for="email" class="required">Email</label>
<input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net" required data-email-msg="Email format is not valid" style="width: 200px;" />
</li>
<li>
<label for="tel" class="required">Phone</label>
<input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
validationMessage="Enter at least ten digits" style="width: 200px;"/>
</li>
<li class="accept">
<input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> I accept the terms of service
</li>
<li class="confirm">
<button class="k-button k-primary" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
<script>
$(document).ready(function() {
var data = [
"12 Angry Men",
"Il buono, il brutto, il cattivo.",
"Inception",
"One Flew Over the Cuckoo's Nest",
"Pulp Fiction",
"Schindler's List",
"The Dark Knight",
"The Godfather",
"The Godfather: Part II",
"The Shawshank Redemption"
]; $("#search").kendoAutoComplete({
dataSource: data,
separator: ", "
}); $("#time").kendoDropDownList({
optionLabel: "--Start time--"
}); $("#amount").kendoNumericTextBox(); var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
status = $(".status"); $("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
</body>
</html>
kendo-ui表单验证的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat
[Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...
- vue踩坑：vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...
- jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- 【表单验证】基于jQuery的高度灵活的表单验证（无UI）
表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- 群里分享的react的收藏一下！今日周末，改了个表单验证然后无所事事了！
今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还 ...
随机推荐
- Android——Fragment+Editext总结
原文地址: android Fragment中没有onTouchEvent解决方法 Android--点击EditText的时候弹出软键盘,点击EditText之外空白处软键盘消失,android-- ...
- NLP-训练个model出来写诗
2018年新年,腾讯整出来个ai春联很吸引眼球,刚好有个需求让我看下能不能训出来个model来写出诗经一样的文风,求助了下小伙伴,直接丢过来2个github,原话是: 查了一下诗经一共38000个字, ...
- 由于无法验证发布者 所以windows阻止此软件
打开Internet Explorer---菜单栏点“工具”---Internet选项--安全---自定义级别---安全设置---“ActiveX控件和插件下”的第5个“下载未签名的ActiveX控件 ...
- Knockout开发中文API系列4–监控属性数组
PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整. 如果你想侦测并响应一个对象的变 ...
- shell脚本传递带有空格的参数的解决方法
如下例子所示: #!/bin/sh dt= rdms_presql='select * from dm_general_stat where dimcode = "day" and ...
- 关于Unity中Shader的使用
在游戏的开发过程中,程序员不太会自己去写shader,因为写起来很麻烦,而且只有Unity会报错,编译器也没有什么提示. 通常是拿别人的shader改一改,当然,程序员还是要能看懂和会一点shader ...
- 【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 var person = new Object(); person.age = 23; person.name = "David"; ...
- Axiom3D:Ogre公告板集与合并批次
在上文中,我们把Ogre里的网格分解成点线面后,我们要完成一个新的功能,在点上突出显示. 得到顶点位置后,这个功能也就是一个很简单的事,最开始是每个顶点添加一个子节点,节点上添加一个圆点. forea ...
- Linux 下查看某个进程运行的堆栈信息
1. 根据进程名称查询进程ID ps -ef | grep processName 2. 将进程的堆栈信息写入log gstack processId > s.log 3. 查看log vim ...
- zXing使用注意事项-转
zXing使用注意事项 ------------------ zxing和zbar的比较: ZXing项目的示例程序对于摄像头的控制写的非常全面,ZBar的没有ZBar基于C语言编写,解码效率高于 ...