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表单里自定义 ...
随机推荐
- C# FTP常规方法
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- 【转】exec xargs的区别 另附eval命令介绍
-exec: 对符合条件的文件执行所给的Linux 命令,执行exec后面的shell脚本.脚本中,{}表示命令的参数即为所找到的文件,以:表示comman命令的结束.\是转义符,因为分号在命令中还 ...
- 【BZOJ2631】tree
Description 一棵n个点的树.每一个点的初始权值为1. 对于这棵树有q个操作,每一个操作为下面四种操作之中的一个: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 ...
- Python学习笔记_03:简单操作MongoDB数据库
目录 1. 插入文档 2. 查询文档 3. 更新文档 4. 删除文档 1. 插入文档 # -*- coding: UTF-8 -*- import datetime from pymongo im ...
- Mongostat 2.6详解
Mongostat C:\Users\John>Mongostat connected to: 127.0.0.1 insert query update delete getmore comm ...
- XML与JSON使用区别
一:XML XML 文档形成了一种树结构,它从"根部"开始,然后扩展到"枝叶". XML 文档形成一种树结构 XML 文档必须包含根元素.该元素是所有其他元素的 ...
- CS 寄存器 和 IP 寄存器
下面将要介绍的是一组非常非常重要的寄存器,即 CS:IP . CS:IP 两个寄存器指示了 CPU 当前将要读取的指令的地址,其中 CS 为代码段寄存器,而 IP 为指令指针寄存器 . 什么叫做 ...
- POJ 3268 Bookshelf 2 动态规划法题解
Description Farmer John recently bought another bookshelf for the cow library, but the shelf is gett ...
- JUC-ReadWriteLock
ReadWriteLock 维护了一对相关的锁,一个用于只读操作,另一个用于写入操作.只要没有 writer,读取锁可以由多个 reader 线程同时保持.写入锁是独占的. ReadWriteLock ...
- 使用MSTSC远程登录时提示证书无效的解决方法
On your local machine Open Windows command prompt type: gpedit.msc -> Press Enter -> a new win ...