Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.
目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件.
步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个afterkeydown事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把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> <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
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 84 85 86 87 88 89 90 91 92 93 94 95 96 | 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) { 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( "" ) } }, 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 () { viewModel.ChecktFirstNameIsValid(); viewModel.ChecktLastNameIsValid(); viewModel.ShowAllErrorMessage(); }, viewModel); $(document).ready( function () { ko.applyBindings(viewModel); }); }); |
3.截图
4.总结
afterkeydown会在页面一开始加载就运行, 这点感觉不太友好, 实际上应该把它用在适合它发挥的场景中, 例如: 要求输入完数据后自动变成英文大写, 这时使用afterkeydown就很合适了, 添加的代码如下:
1 2 3 4 | viewModel.afterkeydown = ko.dependentObservable( function () { viewModel.firstName(viewModel.firstName().toUpperCase()); viewModel.lastName(viewModel.lastName().toUpperCase()); }, viewModel); |
作者:BobLiu
邮箱:lzd_ren@hotmail.com
出处:http://www.cnblogs.com/liuzhendong
本文版权归作者所有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
邮箱:lzd_ren@hotmail.com
出处:http://www.cnblogs.com/liuzhendong
本文版权归作者所有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
分类:
Knockout.Js
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程