Knockout: 使用CSS綁定和event的blur失去焦點事件, 給未經過校驗的輸入框添加紅色邊框突出顯示.

時間 2020-08-10

標籤 knockout 使用 css 綁定 event blur 失去焦點事件未經校驗輸入添加紅色邊框突出顯示欄目 CSS 简体版

原文原文鏈接

目的：使用knockout提供的機制實現輸入框失去焦點後的校驗工做，並使用CSS綁定給未經過校驗的輸入框添加紅色邊框突出顯示.javascript

步驟: 先在htm中添加.error的css樣式, 並在輸入框中的data-bind屬性中添加　event: {blur: ChecktFirstNameIsValid}，和css: { error: !firstNameIsValid()}, 而後再在ViewModel中在firstName監控屬性後面再添加一個firstNameIsValid布爾型監控屬性, 並給ViewModel添加一個ChecktFirstNameIsValid函數, 在這裏檢查輸入框中的值是否符合校驗規則, 若是不經過, 就把firstNameIsValid設置爲false, 這樣, 輸入框就有了紅色邊框, 若是輸入正確, 則把firstNameIsValid設置爲true, 這樣, 輸入框的紅色邊框就消失了.css

1.htmhtml

<!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()}, 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.jsjava

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();

    });*/

    /*$('#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.截圖jquery

4.總結app

綜合前兩文:函數

Knockout: 實踐CSS綁定和jQuery的blur失去焦點事件, 給未經過校驗的輸入框添加紅色邊框突出顯示. http://www.cnblogs.com/liuzhendong/p/3595949.htmlui

Knockout: 實踐CSS綁定和afterkeydown事件, 給未經過校驗的輸入框添加紅色邊框突出顯示; 使用afterkeydown事件自動將輸入轉大寫字母. http://www.cnblogs.com/liuzhendong/p/3595845.htmlthis

能夠看到，使用Jquery的blur事件，使用原生Javascript中的onblur事件，以及使用ko中的event: {blur: ChecktFirstNameIsValid}，均可以完成這個工做．orm

不過若是使用knockout，仍是使用自己的event方案從代碼風格上更統一一些．

5.註釋

LostFocus是WinForm控件的失去焦點事件, 例子以下, 它不能用在htm頁面控件失去焦點時, 在htm中要用onblur或blur纔對.

        public Form2()
        {
            InitializeComponent();
            this.textBox3.LostFocus += textBox3_LostFocus;
        }

        void textBox3_LostFocus(object sender, EventArgs e)
        {
            MessageBox.Show("a");
        }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。