您的位置：首页 > 其它

Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.

2014-03-12 20:30 477 查看
之前整理了三篇帖子:

Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. /article/4878700.html
Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. /article/4878699.html
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母. /article/4878698.html

这三篇讲述的都是同一个主题, 虽然分别用了不同的技术实现, 但大方向都是自己写校验程序的, 今天使用knockout validation插件来做同样的校验工作, 正好可以比较一下可以节省多少代码!

首先要去https://github.com/Knockout-Contrib/Knockout-Validation下载knockout.validation.js, 然后引入自己的代码, 具体如下:

1.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Lib/require/require.js" data-main="JsDemo5_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, validationElement: firstName" /><br />
<input id="txtLastName" type="text" data-bind="value:lastName, validationElement: lastName" /><br />
<input id="txtScore" type="text" data-bind="value:score, validationElement: score" /><br />
<button id="btn" data-bind="click:SubmitClick" >btn</button>
<br /><br />
<!--显示错误提示信息 start-->
<font color="red">
<b>
<span data-bind="validationMessage: firstName"></span>
<span data-bind="validationMessage: lastName"></span>
<span data-bind="validationMessage: score"></span>
</b>
</font>
<!--显示错误提示信息 end-->
</body>
</html>


　　

2.JsDemo5_Main.js

require.config({
paths: {
"knockout": "Lib/knockout/knockout-2.3.0",
"jquery": "Lib/jquery/jquery-1.9.1.min",
"knockvalidation": "Lib/knockout/knockout.validation"
}
});

require(['knockout', 'jquery','knockvalidation'], function ( ko, $, kovalidation) {
//数据绑定

ko.validation.configure({
decorateElement: false,
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true,
messageTemplate: null,
errorClass : 'error'
});

var viewModel = {
firstName: ko.observable().extend({ required: { message: '请输入firstName' } }),
lastName: ko.observable().extend({ required: { message: '请输入lastName' } }).extend({ minLength: 2, maxLength: 10 }),
score: ko.observable().extend({
validation: {
validator: function (val, someOtherVal) {
if (val != null && val.length >= someOtherVal)
{
return true;
}
else
{
return false;
}
},
message: '最少要输入6位数字',
params: 6
}
}),
SubmitClick: function () {
if (viewModel.errors().length == 0) {
//可以提交数据了.
alert("ok");
return true;
} else {
alert("fail");
viewModel.errors.showAllMessages();
return false;
}
}
};

viewModel.errors = ko.validation.group(viewModel);

$(document).ready(function () {
ko.applyBindings(viewModel);
});

});


3.截图



4.总结

使用了knockout.validation插件，确实大大节省了代码量，而且knockout.validation插件也支持写自定义的校验函数，扩展性非常好，因此，值得推荐使用！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航