<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
KNOCKOUT LESSON 4
</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
#content1{padding:16px;}
.errors{color: red;}
</style>
<script type="text/javascript" src="scripts/knockout30.js"></script>
<script type="text/javascript" src="scripts/knockout.validation.min.js"></script>
</head> <body> <div id="content1">
<form data-bind="submit:SubmitForm">
<div><label>用户名：</label><input data-bind="value:Name" /></div>
<div><label>电子邮件：</label><input data-bind="value:Email" /></div>
<div><label>地址：</label>
<select data-bind="options:CityList,optionsText:'Name',optionsValue:'Code',value:City,optionsCaption:'请选择城市'"></select>
<select data-bind="options:CurrentAreaList,optionsText:'Name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'"></select>
</div>
<div>
<label>爱好</label>
<select multiple="multiple" data-bind="options:Hobbies,selectedOptions:MyHobbies"></select>
</div>
<p data-bind="html:MyHobbies"></p>
<div>
<input type="submit" value="提交" />
</div>
</form>
</div> <script type="text/javascript" src="scripts/jQuery183.js"></script>
<script>
ko.validation.configure({
registerExtender:true,
insertMessages:true,
errorClass:'errors'
});
$(document).ready(function(){
var ViewModel = function(){
var self = this;
self.Name = ko.observable("").extend({required:{message:'请输入您的姓名'}});
self.Email = ko.observable("").extend({required:{message:'请输入您的邮箱'}}).extend({pattern:{message:'邮箱格式非法',params:'^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'}});
self.City = ko.observable("");
self.Area = ko.observable("");
self.CityList = ko.observableArray([
{Name:'北京',Code:1001},
{Name:'上海',Code:1002}
]);
self.AreaList = ko.observableArray([
{Name:'朝阳区',Code:1001001,CityCode:1001},
{Name:'宣武区',Code:1001002,CityCode:1001},
{Name:'海淀区',Code:1001003,CityCode:1001},
{Name:'通州区',Code:1001004,CityCode:1001},
{Name:'静安区',Code:1002001,CityCode:1002},
{Name:'徐汇区',Code:1002002,CityCode:1002},
{Name:'浦东区',Code:1002003,CityCode:1002}
]);
self.CurrentAreaList = ko.computed(function(){
return ko.utils.arrayFilter(self.AreaList(),function(area){
return area.CityCode == self.City();
});
},self);
self.Hobbies = ko.observableArray([
"登山",
"篮球",
"电影",
"音乐"
]);
self.MyHobbies = ko.observable("");
self.SubmitForm = function(){
if(self.errors().length > 0){
self.errors.showAllMessages();
return false;
}else{
return true;
}
}
} var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel); currentViewModel.errors = ko.validation.group(currentViewModel);
});
</script> </body>
</html>
将错误信息集中显示到一固定区域：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index2</title>
<style>
.errors{color: red;}
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<form data-bind="submit:SubmitForm">
<div><label>用户名：</label><input data-bind="value:Name" /></div>
<div><label>电子邮件：</label><input data-bind="value:Email" /></div>
<div><label>地址：</label>
<select data-bind="options:CityList,optionsText:'Name',optionsValue:'Code',value:City,optionsCaption:'请选择城市'"></select>
<select data-bind="options:CurrentAreaList,optionsText:'Name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'"></select>
</div>
<div><input type="submit" value="提交" /></div>
</form>
<div class="errors">
<p data-bind="validationMessage:Name"></p>
<p data-bind="validationMessage:Email"></p>
</div>
</div> <script src="scripts/jQuery183.js"></script>
<script src="scripts/knockout30.js"></script>
<script src="scripts/knockout.validation.min.js"></script>
<script>
ko.validation.configure({
registerExtenders:true,
insertMessages:false,
errorClass:'errors'
});
$(function(){
var ViewModel = function(){
var self = this;
self.Name = ko.observable("").extend({required:{message:'请输入您的姓名'}});
self.Email = ko.observable("").extend({required:{message:'请输入你的邮箱'}}).extend({pattern:{message:'邮箱格式非法',params:'^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'}});
self.City = ko.observable("");
self.Area = ko.observable("");
self.CityList = ko.observableArray([
{Name:'北京',Code:1001},
{Name:'上海',Code:1002}
]);
self.AreaList = ko.observableArray([
{Name:'朝阳区',Code:1001001,CityCode:1001},
{Name:'宣武区',Code:1001002,CityCode:1001},
{Name:'海淀区',Code:1001003,CityCode:1001},
{Name:'通州区',Code:1001004,CityCode:1001},
{Name:'静安区',Code:1002001,CityCode:1002},
{Name:'徐汇区',Code:1002002,CityCode:1002},
{Name:'浦东区',Code:1002003,CityCode:1002}
]);
self.CurrentAreaList = ko.computed(function(){
return ko.utils.arrayFilter(self.AreaList(),function(area){//过滤数组，包含两个参数，第一个需要过滤的数组，第二个是匿名方法
return area.CityCode == self.City();
});
},self); self.SubmitForm = function(){
if(self.errors().length > 0){
self.errors.showAllMessages();
return false
}else{
return true;
}
}
} var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel); currentViewModel.errors = ko.validation.group(currentViewModel);
});
</script>
</body>
</html>