Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了．
步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加JQuery失去焦点blur事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把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) {
return false;
}
else {
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 () {
alert("1");
viewModel.CheckValidInput();
}, viewModel);*/
$(document).ready(function () {
ko.applyBindings(viewModel);
});
});
3.截图
4.总结
和上篇用的afterkeydown比较起来, 本文用的JQuery的blur失去焦点事件更适合做表单校验, 因为它不会一加载页面就执行, 需要用户输入一个值后才发生.
如果不愿意用JQuery的blur事件, 也可以用Javascript中的事件, 效果一样.
document.getElementById("txtFirstName").onblur = function () {
viewModel.ChecktFirstNameIsValid();
viewModel.ShowAllErrorMessage();
}
Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.的更多相关文章
- Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...
- 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 ...
- jquery获取焦点和失去焦点事件代码
input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调 ...
- jquery之鼠标失去焦点事件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 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 ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
随机推荐
- GIT服务器实现web代码自动部署
之前在一台vps服务器上面搭建了Git服务器,用来做代码管理,方便团队开发.但是问题也就相应的来了,使用git可以轻松的上传代码,而由于做的是web开发,每次还都得到服务器上把代码手动pull或者复制 ...
- Oracle Data Integrator 12cR1 (12.1.3.0.0)安装过程
Oracle Data Integrator 12cR1 (12.1.3.0.0)安装过程 下载安装文件 Oracle Data Integrator 12cR1 (12.1.3.0.0) http: ...
- 〖Linux〗Kubuntu设置打开应用时就只在打开时的工作区显示
有没有遇到一种情况: 在工作区1打开了应用程序Google Chrome: 这个时间感觉它打开速度比较慢,就快捷键切换到工作区2了: 结果这个时候,Google Chrome就直接在工作区2打开,多不 ...
- VTK中的装配体（vtkAssembly）
Actors有时也会组合在一起形成层次结构,当其中的某个Actor运动时,会影响到其他Actor的位置.例如,一个机械手臂可能由上臂.前臂.手腕和末端等部分通过关节连接起来.当上臂绕着肩关节旋转时,我 ...
- 怎么解决numpy和matplotlib无法安装问题
使用python setup.py install 折腾了半天没办法解决,最终用 “pip install 包名” 这个办法解决了. 以后忠诚的爱上了pip了 numpy不要轻易升级,升级可能会 ...
- RHEL7-openldap安装配置三（客户端自动挂载配置）
前两篇文章我们配置好了LDAP服务端和LDAP客户端.这篇文章将讲述从LDAP客户机服务器上挂载NFS服务器上共享的目录. 1.LDAP服务器上NFS共享配置 1.1 NFS服务也可以单独搭建在另外一 ...
- 【php+微擎】微擎学习相关帮助推荐
我刚接触微擎没多久,学习中遇到很多问题,走过很多弯路.遇到很多问题在网上也查不到,因此想把我自己的学习历程写出来供新手们参考(本人还是菜鸟一枚,文中错误之处,敬请指正!) 我以一个新手小白的角度来帮助 ...
- 多线程场景下如何使用 ArrayList
ArrayList 不是线程安全的,这点很多人都知道,但是线程不安全的原因及表现,怎么在多线程情况下使用ArrayList,可能不是很清楚,这里总结一下. 1. 源码分析 查看 ArrayList 的 ...
- 自己开发Visual studio插件-一个nvelocity高亮插件
首先,有一个项目用到了nvelocity模板引擎,但是用vs开发模板的时候,没有高亮效果,所以非常不方便,鉴于这个,于是有了自己开发插件的念头,但是在vs sdk开发上面,这方面的资料真是少之又少,网 ...
- （原）torch中提示Unwritable object <userdata> at <?>.callback.self.XXX.threads.__gc__
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6549432.html 参考网址: https://github.com/torch/threads/i ...