Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

目的:使用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失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。