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毕竟看着下面这张图还 ...
随机推荐
- [uboot]uboot中run的一些command在源码位置
如在uEnv.txt中, loadfdt=fatload mmc ${mmcdev}: ${fdtaddr} ${fdtfile} fdtboot=run mmc_args; bootz ${load ...
- webbrowser取页面验证码
碰到一个无比坑爹,外加蛋疼乳酸的问题.从昨天晚上发现bug,到今天下午解决问题,搞了大半天的时间.光是找问题就花了半天,解决问题的方法简单,但是方案的形成也是无比纠结的过程. 背景:webbrowse ...
- 回顾:maven配置和常用命令整理
推荐两个库地址,开源中国的好像不好使了 阿里的仓库:http://maven.aliyun.com/nexus/content/groups/public/ 另一个:http://repo2.mave ...
- Lucene整理--索引的建立
看lucene主页(http://lucene.apache.org/)上眼下lucene已经到4.9.0版本号了, 參考学习的书是依照2.1版本号解说的,写的代码样例是用的3.0.2版本号的,版本号 ...
- linq操作符：元素操作符
元素操作符仅返回一个元素. 一.Fitst操作符 First操作符将返回序列中的第一个元素.如果序列中不包含任何元素,则First<T>方法将引发异常.来看看First()方法的定义: 从 ...
- 《开发专家 Visual C 开发入行真功夫》笔记
智能感知的功能,输入 is 后,同时按下Alt + →这两个键就出现了供选择变量.方法.宏等的列表,继续输入 in 后,isInit就出来了. stdafx.h预编译头文件,.h应用程序主头文件,do ...
- Java设计模式（12）迭代模式（Iterator模式）
上了这么多年学,我发现一个问题,好象老师都很喜欢点名,甚至点名都成了某些老师的嗜好,一日不点名,就饭吃不香,觉睡不好似的,我就觉得很奇怪,你的课要是讲的好,同学又怎么会不来听课呢,殊不知:“误人子弟, ...
- 《Qt数据类型》--QByteArray,QString,int,hex之间的转化
对于QString和QByteArray,他们都有一个toInt的静态函数,QString::toInt()是根据string的字面值转化为int类型,比如string:"123" ...
- 关于Unity中拖尾渲染器的使用
拖尾渲染器 是一个组件,能够帮我们绘制出拖尾的效果. 就是跟在运动物体后面的东西,前进的过程中,末尾的不断消失,前面的不断生成,有一个长度.长度是以时间计算的,从末尾到头有多少秒的时间就是拖尾的长度. ...
- (笔记)ubuntu中取消文件夹或文件等右下解一把锁的标志的方法
ubuntu中取消文件夹或文件等右下解一把锁的标志的方法 方法: sudo chmod -R 777 路径(文件夹或文件) 对文件递归做改变权限为可读可写可运行,即可.