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

浏览数：25 / 时间：2015年06月09日

目的: 实践一下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();
    }