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表单里自定义 ...
随机推荐
- POSTGRESQL 查看数据库 数据表大小
1.查看数据库大小: select pg_database_size('log_analysis'); select pg_database_size('log_analysis'); pg_data ...
- SSH使用Slf4j
1. Slf4j的使用 在上一篇随笔:SSH使用Log4j的基础上配置. (1)导入两个文件:slf4j-api-1.5.8.jar和slf4j-log4j12-1.5.8.jar. (2)在需要日志 ...
- 苹果电脑Macbook怎么编辑hosts文件的方法
苹果电脑Macbook怎么编辑hosts文件的方法 https://jingyan.baidu.com/article/fec4bce2690417f2618d8b07.html 文章 ...
- PHP如何发送邮件
例如使用163邮箱 SMTP,Simple Mail Transfer Protocol,简单邮件传输协议 保证我们的邮件服务器开启了SMTP服务 设置授权码 使用PHPMailer类发送邮件 1 ...
- 图解Ajax工作原理
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6126542.html Ajax指Asynchronous JavaScript and XML(异步的 Jav ...
- windows命令行 批量对源代码添加版权头/头信息
简短精悍的代码,特别适合开源项目使用. for /r %%F in (*.as) DO ( move "%%F" tmp.txt type copyright.txt > & ...
- Xcode7安装CocoaPods
一.CocoaPods介绍以及优点 CocoaPods 是开发 OS X 和 iOS 应用程序的一个第三方库的依赖管理工具.该项目源代码在Github上管理. 通过 CocoaPods,能够非常方便的 ...
- SpringCloud中eureka配置心跳和剔除下线的服务的时间
在默认的springCloud中eureka注册中心在服务下线时表现的非常不灵敏,用惯了dubbo的zk注册中心表示很不习惯,eureka设计的本意是在服务不会频繁上下线和网络稳定的内网,这种设计在生 ...
- Python是解释性语言吗？ 直到看到有 python py、pyc、pyo、pyd 文件
py是源文件,pyc是源文件编译后的文件,pyo是源文件优化编译后的文件,pyd是其他语言写的python库 1. Python是一门解释型语言? Python是一门解释性语言,我就这样一直相信下去, ...
- Linux下Shell元字符的释义
Linux下shell的巧妙应用,对系统的运维很有四两拨千斤的功效! Shell元字符 注意: () 在当前shell的子shell进程运行命令 {}在当前shell进程运行命令