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毕竟看着下面这张图还 ...
随机推荐
- 线程的几种状态转换<转>
线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法. ...
- drupal pathauto的配置
- Swift的函数与函数指针、闭包Closure等相关内容介绍
<span style="font-size:24px;">//函数 //demo1 无參数类型 func testConcat(){ println("測试 ...
- VS2013安装MVC5
打开VS 选择 .net 4.5 创建项目 右击项目 选择管理NuGet 输入Microsoft.AspNet.Mvc -Version 5.0.0 安装最新版本的MVC5
- ps 和 grep 查找消除 grep自身查找
用ps -def | grep查找进程很方便,最后一行总是会grep自己. $ ps -def | grep dragonfly-framework dean 5273 5272 0 15:23 pt ...
- 关于Unity中的模型描边与Shader切换(专题二)
模型描边 1: LOL里面的模型描边效果,点击防御塔会有描边的效果,被攻击的时候模型也要描边凸显一下2: 网上可以找到模型描边的Shader,可以直接下载使用,一组第三方的Shader, 帮我们解决了 ...
- 基于jquery的ui选择之路
选定: 主框架:jqueryUi tree:ztree grid:jqGrid layout:jquery.layout 原由: 还有其他demo,ajax实现等参看连接: 正在做的一个项目选择jqu ...
- MCMC采样理论的一点知识
看了好多相关的知识,大致了解了一下马尔可夫链-蒙特卡罗采样理论,有必要记来下来. 蒙特卡罗积分:(来自:http://blog.csdn.net/itplus/article/details/1916 ...
- 关于对最新HTML总结PPT讲稿的分享
如果大家还记得HTML,那么2009年的时候可能当时还是HTML1.0时代,而国际化的标准才刚刚开始,对于TABLE表格的使用,还有就是一些常用的标签都是及为简单的,因为当时的代码都是接近于短码,所以 ...
- ubuntu下查看windows的 txt 文件乱码
在终端执行 gsettings set org.gnome.gedit.preferences.encodings auto-detected "['UTF-8','GB18030','GB ...