Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.
之前整理了三篇帖子:
Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3596267.html
Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3595949.html
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母. http://www.cnblogs.com/liuzhendong/p/3595845.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插件也支持写自定义的校验函数，扩展性非常好，因此，值得推荐使用！
Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.的更多相关文章
- Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...
- Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...
- Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.
目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...
- springboot使用validation 插件做数据校验
不多说废话. 首先,我们需要在入参实体对象中,使用注解,控制 @Datapublic class UpdateShufflingRequest { private String shuffling_l ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jQuery插件之validation插件
前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- jQuery的validation插件(验证表单插件)
更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www. ...
- (转)struts2：数据校验，通过XWork校验框架实现（validation.xml）
转载自:http://www.cnblogs.com/nayitian/p/3475661.html struts2:数据校验,通过XWork校验框架实现(validation.xml) 根据输入 ...
随机推荐
- hibernate update 只更新部分字段的3种方法（其实我只想说第二种）
hibernate 中如果直接使用Session.update(Object o);会把这个表中的所有字段更新一遍. 比如: public class Teacher Test { @Test pub ...
- MapReduce任务参数调优(转)
http://blog.javachen.com/2014/06/24/tuning-in-mapreduce/ 本文主要记录Hadoop 2.x版本中MapReduce参数调优,不涉及Yarn的调优 ...
- Java程序监控指标
监控指标: 1.CPU平均使用率 2.内存平均使用率 3.应用程序错误数 4.应用程序请求量 5.应用平均响应时间 6.硬件I/O指标 7.JMX 7.1.Full gc count 7.2.Full ...
- IF函数
语法:IF(logical_test,value_if_true,value_if_false) logical_test:表示计算结果为 TRUE 或 FALSE 的任意值或表达式 value_if ...
- 使用eclipse生成文档（javadoc）主要有三种方法：
使用eclipse生成文档(javadoc)主要有三种方法: 1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步. 在Ja ...
- Centos7 修改终端文字显示颜色
Centos7的配色方案主要是以下几个文件 -rw-r--r--. root root 11月 /etc/DIR_COLORS -rw-r--r--. root root 10月 : /etc/DIR ...
- 转:Ogre的MaterialSystem分析
1. Mesh .SubMesh.SubEntity和Entity 所有的Mesh对象是由SubMesh构成的,每个SubMesh代表了Mesh对象的一部分,该部分只能使用一种Meterial.如果一 ...
- Java线程(十一)：Fork/Join-Java并行计算框架
并行计算在处处都有大数据的今天已经不是一个新奇的词汇了.如今已经有单机多核甚至多机集群并行计算.注意,这里说的是并行,而不是并发.严格的将,并行是指系统内有多个任务同一时候运行,而并发是指系统内有多个 ...
- 关于UDP-读这篇就够了（疑难杂症和使用）
本文为转载文章 原文链接:https://www.qcloud.com/community/article/848077001486437077 版权归原文所有 关于UDP 面向报文的传输方式决定了U ...
- java struts2入门学习---自定义类型转换
自定义类型转换器的作用就是将struts无法识别的类型转换成自己所需要的. 比如输入:广东-东莞-虎门,对应的输出时能输出:广东省 东莞市 虎门(镇/区) 这里涉及到的知识点即是将String转换为任 ...