目的: 實踐一下Knockout提供的CSS綁定功能和JQuery的blur失去焦點事件, 這次不使用Knockout的afterkeydown事件了．
步驟: 先在htm中添加.error的css樣式, 並在輸入框中綁定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName監控屬性后面再添加一個firstNameIsValid布爾型監控屬性, 並給ViewModel添加JQuery失去焦點blur事件, 在這里檢查輸入框中的值是否符合校驗規則, 如果不通過, 就把firstNameIsValid設置為false, 這樣, 輸入框就有了紅色邊框, 如果輸入正確, 則把firstNameIsValid設置為true, 這樣, 輸入框的紅色邊框就消失了.
1.Htm代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Lib/require/require.js" data-main="JsDemo2_Main"></script>
<style type="text/css">
.error {
border: 2px solid red;
}
input {
border: 1px solid #AAA;
padding: 4px;
}
</style>
</head>
<body>
<input id="txtFirstName" type="text" data-bind="value:firstName, css: { error: !firstNameIsValid()}" />
<input id="txtLastName" type="text" data-bind="value:lastName, css: { error: !lastNameIsValid()}" />
<button id="btn" data-bind="click:SubmitClick" >btn</button>
<br /><br />
<!--顯示錯誤提示信息 start-->
<font color="red">
<b>
<div id="ErrorMessage"></div>
</b>
</font>
<!--顯示錯誤提示信息 end-->
</body>
</html>
2.JsDemo2_Main.js
require.config({
paths: {
"knockout": "Lib/knockout/knockout-2.3.0",
"jquery": "Lib/jquery/jquery-1.9.1.min"
}
});
require(['knockout', 'jquery'], function ( ko, $) {
//數據綁定
var viewModel = {
firstName: ko.observable(""),
firstNameIsValid: ko.observable(true),
firstNameInValidMessage: ko.observable(),
lastName: ko.observable(""),
lastNameIsValid: ko.observable(true),
lastNameInValidMessage: ko.observable(),
AllErrorMessage: ko.observable(),
SubmitClick: function () {
viewModel.ChecktFirstNameIsValid();
viewModel.ChecktLastNameIsValid();
viewModel.ShowAllErrorMessage();
if (viewModel.AllErrorMessage().length > 0) {
return false;
}
else {
return true;
//可以提交數據了.
}
},
ChecktFirstNameIsValid: function () {
if (viewModel.firstName().length <= 10) {
viewModel.firstNameIsValid(false);
viewModel.firstNameInValidMessage("firstName請輸入至少10位字符")
}
else {
viewModel.firstNameIsValid(true);
viewModel.firstNameInValidMessage("")
}
},
ChecktLastNameIsValid: function () {
if (viewModel.lastName().length <= 10) {
viewModel.lastNameIsValid(false);
viewModel.lastNameInValidMessage("lastName請輸入至少10位字符")
}
else {
viewModel.lastNameIsValid(true);
viewModel.lastNameInValidMessage("")
}
},
ShowAllErrorMessage: function () {
var message = "";
if (!viewModel.firstNameIsValid()) {
message += "\n" + viewModel.firstNameInValidMessage();
}
if (!viewModel.lastNameIsValid()) {
message += "\n" + viewModel.lastNameInValidMessage();
}
viewModel.AllErrorMessage(message);
if (viewModel.AllErrorMessage().length > 0) {
$("#ErrorMessage").html(message);
}
else {
$("#ErrorMessage").html("");
}
}
};
$('#txtFirstName').on('blur', function () {
viewModel.ChecktFirstNameIsValid();
viewModel.ShowAllErrorMessage();
});
$('#txtLastName').on('blur', function () {
viewModel.ChecktLastNameIsValid();
viewModel.ShowAllErrorMessage();
});
/*viewModel.afterkeydown = ko.dependentObservable(function () {
alert("1");
viewModel.CheckValidInput();
}, viewModel);*/
$(document).ready(function () {
ko.applyBindings(viewModel);
});
});
3.截圖
4.總結
和上篇用的afterkeydown比較起來, 本文用的JQuery的blur失去焦點事件更適合做表單校驗, 因為它不會一加載頁面就執行, 需要用戶輸入一個值后才發生.
如果不願意用JQuery的blur事件, 也可以用Javascript中的事件, 效果一樣.
document.getElementById("txtFirstName").onblur = function () {
viewModel.ChecktFirstNameIsValid();
viewModel.ShowAllErrorMessage();
}