<!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;} </style> <script type="text/javascript" src="scripts/knockout30.js"></script> </head> <body> <div id="content1"> Year:<input data-bind="value:Year"><br/> Month:<input data-bind="value:Month"><br/> Day:<input data-bind="value:Day"><br/> Date:<span data-bind="html: Date " ></span><br/> <!--Date:<span data-bind="html:Year()+'-'+Month()+'-'+Day()"></span>--> <input data-bind="value:Date" /> </div> <script type="text/javascript" src="scripts/jQuery183.js"></script> <script> $(document).ready(function(){ var ViewModel = function(){ var self = this; self.Year = ko.observable(""); self.Month = ko.observable(""); self.Day = ko.observable(""); // self.Date = ko.computed(function(){ // return self.Year()+'年'+self.Month()+'月'+self.Day()+'日'; // }); self.Date = ko.pureComputed({ write: function(value){ var indexOfYear = value.indexOf('年'); var indexOfMonth=value.indexOf('月'); var indexOfDay=value.indexOf('日'); self.Year(value.substring(0,indexOfYear)); self.Month(value.substring(indexOfYear+1,indexOfMonth)); self.Day(value.substring(indexOfMonth+1,indexOfDay)); }, read: function(){ return self.Year()+'年'+self.Month()+'月'+self.Day()+'日'; }, owner:self }); }; var currentViewModel = new ViewModel(); ko.applyBindings(currentViewModel); }); </script> </body> </html>
使用正则过滤：当输入的是不符合规则的日期时：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
Year:<input data-bind="value:Year" /><br />
Month:<input data-bind="value:Month" /><br />
Day:<input data-bind="value:Day" /><br />
Date:<span data-bind="html:Date"></span><br />
<input data-bind="value:Date" />
</div>
<script src="scripts/jQuery183.js"></script>
<script src="scripts/knockout30.js"></script>
<script>
$(document).ready(function(){
var ViewModel = function(){
var self = this;
self.Year = ko.observable("");
self.Month = ko.observable("");
self.Day = ko.observable("");
// self.Date = ko.computed(function(){
// return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
// });
self.Date = ko.pureComputed({
write: function(value){
var indexOfYear = value.indexOf('年');
var indexOfMonth=value.indexOf('月');
var indexOfDay=value.indexOf('日');
var year = value.substring(0,indexOfYear);
self.Year(year);
if(!/^d(4)$/.test(year)){
alert('请输入四位阿拉伯数字的年份');
return false;
}
var month = value.substring(indexOfYear+1,indexOfMonth);
self.Month(month);
if(!/^[0-9][0-2]$/.test(month)){
alert('请输入合法月份数字');
return false;
}
var day = value.substring(indexOfMonth+1,indexOfDay);
self.Day(day);
if(!/^[0-3][0-9]$/.test(day)){
alert('请输入合法天数数字');
return false;
}
},
read: function(){
return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
},
owner:self
});
};
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script>
</body>
</html>