Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的: 实践一下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(); }
作者:BobLiu
邮箱:lzd_ren@hotmail.com
出处:http://www.cnblogs.com/liuzhendong
本文版权归作者所有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
邮箱:lzd_ren@hotmail.com
出处:http://www.cnblogs.com/liuzhendong
本文版权归作者所有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。