您的位置：首页 > Web前端 > CSS

Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

2014-03-12 14:23 661 查看
目的：使用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失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. /article/4878699.html

Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母. /article/4878698.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");
}


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航