摘要：
表单验证是每一个项目必不可少的，他能够帮助我们过滤不正确的用户输入，保证系统数据正确。例如下面这样：
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>