Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.
目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件．
步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个afterkeydown事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把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) {
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就很合适了, 添加的代码如下:
viewModel.afterkeydown = ko.dependentObservable(function () {
viewModel.firstName(viewModel.firstName().toUpperCase());
viewModel.lastName(viewModel.lastName().toUpperCase());
}, viewModel);
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.的更多相关文章
- Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...
- 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.js CSS绑定
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 通过CSS禁止Chrome自动为输入框添加橘黄色边框，修改/禁止 chrome input边框颜色，
1 /*Chrome浏览器 点击input 黄色边框 禁用*/ .NoOutLine:focus{outline: none} <asp:TextBox ID="txtTeleph ...
- 在ASP.NET MVC中使用Knockout实践09，自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 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类选择器来附加样式而想直接 ...
- （七）Knockout 创建自定义绑定
创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义 ...
随机推荐
- VMware vSphere 5.1 群集深入解析（一）
http://virtualbox.blog.51cto.com/531002/1168293 VMware vSphere 5.1 Clustering Deepdive HA.DRS.Storag ...
- Atlas系列一：Atlas功能特点FAQ
1:Atlas是否支持多字符集? 支持,可以在test.cnf中指定. #默认字符集,设置该项后客户端不再需要执行SET NAMES语句charset = utf8 2:Atlas是否支持事物操作? ...
- SQL Server事务复制搭建与同步经验
0. 环境 无域环境 发布服务和分发服务器同一台主机 角色 主机名 IP 发布名 发布库名/订阅库名 发布服务器 Server1 192.168.1.100 test3 db1 分发服务器(与发布服务 ...
- V-rep学习笔记：机器人路径规划1
Motion Planning Library V-REP 从3.3.0开始,使用运动规划库OMPL作为插件,通过调用API的方式代替以前的方法进行运动规划(The old path/motion ...
- python之模块colorsys颜色转换模块 暂不了解
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之模块colorsys #颜色转换模块 #colorsys import colorsys 针对 ...
- Windows操作系统安全加固
本文档旨在指导系统管理人员或安全检查人员进行Windows操作系统的安全合规性检查和配置. 1. 账户管理和认证授权 1.1 账户 默认账户安全 禁用Guest账户. 禁用或删除其他无用账户(建议先禁 ...
- ios中PagedFlowView的用法
下载地址 引入PagedFlowView.h PagedFlowView.m文件 #import <UIKit/UIKit.h> #import "PagedFlowView. ...
- std::thread 不 join
std::thread 构造之后 使用 detach.就可以了
- MATLAB 的函数句柄
MATLAB 的函数句柄: 1.何为函数句柄? 函数句柄也是MATLAB中的一种常见的数据类型, 它的地位类似于其它计算机语言里的函数对象(Javascript,Python),函数指针(C++),或 ...
- linux shell 脚本攻略学习17--正则表达式入门
正则表达式(也称为“regex”或“regexp”)是一种用来描述文本模式的特殊语法.在 Linux 系统上,正则表达式通常被用来查找文本的模式,以及对文本流执行“搜索-替换”操作以及其它功能. 正则 ...