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

时间:2022-12-29 12:48:27

目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示.

步骤: 先在htm中添加.error的css样式, 并在输入框中的data-bind属性中添加 event: {blur: ChecktFirstNameIsValid},和css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个ChecktFirstNameIsValid函数, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把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()}, 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

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.截图

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

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才对.

        public Form2()
{
InitializeComponent();
this.textBox3.LostFocus += textBox3_LostFocus;
} void textBox3_LostFocus(object sender, EventArgs e)
{
MessageBox.Show("a");
}

  

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

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

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了. 步骤: 先在htm中添加.error的css样 ...

  2. Knockout&colon; 使用knockout validation插件进行校验&comma; 给未通过校验的输入框添加红色边框突出显示&period;

    之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhend ...

  3. Knockout&colon; 实践CSS绑定和afterkeydown事件&comma; 给未通过校验的输入框添加红色边框突出显示&semi; 使用afterkeydown事件自动将输入转大写字母&period;

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件. 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

  4. Knockout&period;js CSS绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  5. input中blur失去焦点事件与点击事件冲突时如何解决

    方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...

  6. 通过CSS禁止Chrome自动为输入框添加橘黄色边框,修改&sol;禁止 chrome input边框颜色,

    1   /*Chrome浏览器 点击input 黄色边框 禁用*/ .NoOutLine:focus{outline: none} <asp:TextBox ID="txtTeleph ...

  7. Knockout&period;Js官网学习(html绑定、css绑定)

    Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...

  8. Knockout v3&period;4&period;0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  9. KnockoutJS 3&period;X API 第四章 表单绑定&lpar;7&rpar; event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...

随机推荐

  1. bzoj 2648 KD-tree

    稍微看了一下KD-tree的讲义,大概明白了它的原理,但是实现不出来... 所以无耻的抄了一下黄学长的... #include<iostream> #include<cstdio&g ...

  2. &lbrack;转载&rsqb;UML时序图总结

    前言 在我的工作中,用的最多的就是时序图了.可能由于工作的原因,我也是最喜欢画时序图了,很清楚,很明了,什么时候发送什么消息,到达什么状态,一下子就展示在你的脑海里,对于消息驱动的程序来说,是再好不过 ...

  3. javascript特效——烟花燃放的效果&lbrack;xyytit&rsqb;

    春节临近,要做活动促销专题页面,百度了下,找到一些烟花燃放的特效,整理并添加了修改烟花各种参数的注释,便于大家修改使用,版权归原作者所有. 1. 示例效果:点击这里   下载源码:点击这里 2. Ht ...

  4. linux命令行下使用R语言绘图

    系统:centos 6.4 64bit 环境安装参考:http://hi.baidu.com/solohac/item/4a18e78f1bef9b5825ebd99c 在R语言中可以使用png()等 ...

  5. NGUI 实现 透明底图遮罩 &amp&semi;&amp&semi; 人物像素变黑

    今天 UI 那边要求实现一个 透明底图遮罩 与 变黑 的效果. 刚开始考虑使用 shader 实现一个 网上搜了一下,发现了这个,但是底图需要不透明才行,不然他会把 底图的不遮罩部分的透明部分 进行颜 ...

  6. css3选择器二

    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息,了解和掌握css3一些的选择器,是很有必要的. :enabled 和 :disabled选择器表单元素有可用(“:enabled”)和不可 ...

  7. C&num;中的DataTable简单使用Merge

    //不同结构的DataTable追加第二个DataTable数据在对应行后的 简单使用//不同结构的DataTable追加在行后面的合并 DataTable dt = new DataTable(); ...

  8. &num;AzureChat - 自动伸缩和虚拟机

    我们很高兴地推出再一次 #AzureChat,这是 @WindowsAzure 团队为您精心打造的一个在 Twitter 上进行的聊天活动! #AzureChat 专注于云计算的各个方面以及云开发的最 ...

  9. Android&colon;assests和raw的区别

    转自:http://www.cnblogs.com/lianghui66/p/3248636.html ------------------------------------------------ ...

  10. mac上安装iterm2的一些步骤记录

    1.首先到item官网上下载item   下载地址 http://iterm2.com/ 2.把iitem2设置为默认终端: 3.设置快速打开关闭的hotkey 我们这里设置为command + T键 ...