目的：使用knockout提供的机制实现输入框失去焦点后的校验工作，并使用CSS绑定给未通过校验的输入框添加红色边框突出显示.
步骤: 先在htm中添加.error的css样式, 并在输入框中的data-bind属性中添加 event: {blur: ChecktFirstNameIsValid}，和css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个ChecktFirstNameIsValid函数, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把firstNameIsValid设置为false, 这样, 输入框就有了红色边框, 如果输入正确, 则把firstNameIsValid设置为true, 这样, 输入框的红色边框就消失了.
1.htm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!DOCTYPE html><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()}, event: {blur: ChecktFirstNameIsValid}"
/> <input id="txtLastName"
type="text"
data-bind="value:lastName, css: { error: !lastNameIsValid()}, event: {blur: ChecktLastNameIsValid}"
/> <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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83 |
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(); if
(viewModel.AllErrorMessage().length > 0) { alert("fail"); return
false; } else
{ alert("ok"); return
true; //可以提交数据了. } }, ChecktFirstNameIsValid: function
() { if
(viewModel.firstName().length <= 10) { viewModel.firstNameIsValid(false); viewModel.firstNameInValidMessage("firstName请输入至少10位字符") } else
{ viewModel.firstNameIsValid(true); viewModel.firstNameInValidMessage("") } viewModel.ShowAllErrorMessage(); }, ChecktLastNameIsValid: function
() { if
(viewModel.lastName().length <= 10) { viewModel.lastNameIsValid(false); viewModel.lastNameInValidMessage("lastName请输入至少10位字符") } else
{ viewModel.lastNameIsValid(true); viewModel.lastNameInValidMessage("") } viewModel.ShowAllErrorMessage(); }, 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(""); } } }; /*document.getElementById("txtFirstName").onblur = function () { viewModel.ChecktFirstNameIsValid(); viewModel.ShowAllErrorMessage(); }*/ /*$(‘#txtFirstName‘).on(‘blur‘, function
() { viewModel.ChecktFirstNameIsValid(); viewModel.ShowAllErrorMessage(); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
});*/ /*$(‘#txtLastName‘).on(‘blur‘, function () { viewModel.ChecktLastNameIsValid(); viewModel.ShowAllErrorMessage(); });*/ viewModel.afterkeydown = ko.dependentObservable(function
() { viewModel.firstName(viewModel.firstName().toUpperCase()); viewModel.lastName(viewModel.lastName().toUpperCase()); }, viewModel); $(document).ready(function
() { ko.applyBindings(viewModel); }); }); |
3.截图
4.总结
综合前两文:
Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3595949.html
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母. http://www.cnblogs.com/liuzhendong/p/3595845.html
可以看到，使用Jquery的blur事件，使用原生Javascript中的onblur事件，以及使用ko中的event: {blur: ChecktFirstNameIsValid}，都可以完成这个工作．
不过如果使用knockout，还是使用本身的event方案从代码风格上更统一一些．
5.注释
LostFocus是WinForm控件的失去焦点事件, 例子如下, 它不能用在htm页面控件失去焦点时, 在htm中要用onblur或blur才对.
|
1
2
3
4
5
6
7
8
9
10 |
public
Form2(){ InitializeComponent(); this.textBox3.LostFocus += textBox3_LostFocus;}void textBox3_LostFocus(object
sender, EventArgs e){ MessageBox.Show("a");} |
Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.,布布扣,bubuko.com
Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
原文：http://www.cnblogs.com/liuzhendong/p/3596267.html