Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的：使用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.截图
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失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.的更多相关文章
- Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...
- Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.
之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhend ...
- Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.
目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...
- Knockout.js CSS绑定
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- input中blur失去焦点事件与点击事件冲突时如何解决
方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...
- 通过CSS禁止Chrome自动为输入框添加橘黄色边框，修改/禁止 chrome input边框颜色，
1 /*Chrome浏览器 点击input 黄色边框 禁用*/ .NoOutLine:focus{outline: none} <asp:TextBox ID="txtTeleph ...
- Knockout.Js官网学习（html绑定、css绑定）
Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...
- Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定
4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...
- KnockoutJS 3.X API 第四章 表单绑定(7) event绑定
目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...
随机推荐
- 在cmd中为命令设置别名以及启动cmd时自动执行bat
http://www.cnblogs.com/fstang/archive/2013/04/06/3002006.html 简短步骤: 1.关闭所有在运行的CMD窗口 2.创建文件C:\cmd-ali ...
- tornado code
# get the requtest URL self.request.uri
- JSP入门实战下
第一部分简单解说:jsp语法的规范,以及三大编译指令,七个动作指令和九大内置对象,生命周期解说等. 这章主要解说el表达式,核心标签库. 所有代码下载:链接 1.核心标签库(JSTL:c)解说: 1. ...
- Got fatal error 1236 from master when reading data from binary log: 'Could not find first log file name in binary log index file'系列三：重置主从同步
1:停止slave服务器的主从同步 stop slave; 2:对Master数据库加锁 flush tables with read lock; 3:备份Master上的数据 mysqldump - ...
- Struts 2相关配置与基本操作演示(案例Demo)
基本介绍 Struts 2 Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2 ...
- java AES加密、解密（兼容windows和linux）
java AES加密.解密 CreationTime--2018年7月14日10点06分 Author:Marydon 1.准备工作 updateTime--2018年8月10日15点28分 up ...
- SpringBoot常用属性配置
SpringBoot 2.x:https://github.com/spring-projects/spring-boot/blob/2.0.x/spring-boot-project/spring- ...
- 2014年辛星Javascript解读第三节
经过第一节的入门和第二节的运算符.那么接下来我们就能够学习Javascript的函数了,当然了.无论大家之前学习的是什么编程语言.都会有函数的概念,假设大家学的是Pascal,还会有"过程& ...
- ios中xml和html解析（封装）
下载地址 http://pan.baidu.com/share/link?shareid=2902188921&uk=923776187 GDataXML和TFHpple配置是一样的(配置方 ...
- [转]nonlocal和global
在Python中,当引用一个变量的时候,对这个变量的搜索是按找本地作用域(Local).嵌套作用域(Enclosing function locals).全局作用域(Global).内置作用域(bui ...