目的是为了校验table中两个单元格之间的平衡关系,例如大于小于等。
形式为jquery插件
/**
* @author zhangtan
* @email ztreal@gmail.com
* @since 2010-10-21
* 校验页面平衡关系
* @version 1.0.0(2010-10-21)
* @jquery 1.3.2
*/
(function($) {
//基本参数 校验提示文字
/** $.fn.print.default = {
greater: "greater than"
};
// 需要校验的内容参数传入
* var valicontent=new Array({c1tr:0,c1td:1,c2tr:0,c2td:3,symbol:'<'},{c1tr:1,c1td:1,c2tr:1,c2td:3,symbol:'<'},{c1tr:2,c1td:'1+3',c2tr:2,c2td:5,symbol:'<'});
$("#test").check(valicontent); **/
$.fn.check = function(options) {
///<summary>
/// validate div table cell 之间的平衡关系
///</summary>
var va1namelist = '';
var va1 = 0;
var va2 = "";
var va2name = "";
var symbol = "";
var error = [];
$("#jsshowerror").empty();
for (var i = 0; i < options.length; i++) {
//var opts = $.extend({}, $.fn.check.defaults, options);
var temptdlist = options[i].c1td.toString().split('+');
if (options[i].c1td.toString().indexOf('+') > -1) {
for (var ii = 0; ii < temptdlist.length; ii++) {
va1 = Number(va1) + Number($(this).find("tr").eq(options[i].c1tr).children("td").eq(temptdlist[ii]).find("input[type='text'],select").val());
va1namelist = va1namelist + '加' + $(this).find("tr").eq(options[i].c1tr).children("td").eq(temptdlist[ii] - 1).html();
}
va1namelist = va1namelist.substring(1, va1namelist.length);
va2 = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td).find("input[type='text'],select").val();
va2name = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td - 1).html();
symbol = options[i].symbol;
if (eval(va1 + symbol + va2)) {
//alert("检验成功!");
}
else {
error[error.length]= va1namelist + $.fn.check.defaults[symbol] + va2name;
//alert(va1namelist + $.fn.check.defaults[symbol] + va2name);
}
}
else {
va1 = $(this).find("tr").eq(options[i].c1tr).children("td").eq(options[i].c1td).find("input[type='text'],select").val();
var va1name = $(this).find("tr").eq(options[i].c1tr).children("td").eq(options[i].c1td - 1).html();
va2 = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td).find("input[type='text'],select").val();
va2name = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td - 1).html();
symbol = options[i].symbol;
if (eval(va1 + symbol + va2)) {
//alert("检验成功!");
}
else {
error[error.length]= va1name + $.fn.check.defaults[symbol] + va2name;
// alert(va1name + $.fn.check.defaults[symbol] + va2name);
}
}
}
if($("#jsshowerror").length>=1){
var errorhtml="";
for(var i =0;i<error.length;i++){
errorhtml = errorhtml+ "<div>"+error[i]+"</div>";
}
$("#jsshowerror").append(errorhtml);
}
};
//校验弹出的提示框
$.fn.check.defaults = {
'>': '应大于',
'<': '应小于'
};
})(jQuery);
使用范例为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>校验测试</title>
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.valipingmeng.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#jsshowerror{
color:red;
}
</style>
<script type="text/javascript">
$(function() {
$("#check").click(function(){
var valicontent=new Array({c1tr:0,c1td:1,c2tr:0,c2td:3,symbol:'<'},{c1tr:1,c1td:1,c2tr:1,c2td:3,symbol:'<'},{c1tr:2,c1td:'1+3',c2tr:2,c2td:5,symbol:'<'});
$("#test").check(valicontent);
})
});
</script>
</head>
<body >
<div id="jsshowerror"></div>
<input type="button" id="check" value="校验"></input>
<table id="test">
<tr>
<td>年龄1</td>
<td><input type="text" value="11"/></td>
<td>年龄2</td>
<td><input type="text" value="22"/></td>
</tr>
<tr>
<td>年龄11</td>
<td><input type="text" value="11"/></td>
<td>年龄22</td>
<td><select>
<option>10</option>
<option>20</option>
</select></td>
</tr>
<tr>
<td>数字1</td>
<td><input type="text" value="11"/></td>
<td>数字2</td>
<td><select>
<option>10</option>
<option>20</option>
</select></td><td>合计</td>
<td><input type="text" value="33"/></td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
铁路工程试验仪器设备校验方法表格(全套)2022 版宣贯.pdf 该文件提供了铁路工程试验仪器设备的校验方法表格,涵盖了多种试验仪器设备的校验项目和技术要求。下面是从该文件中提取的知识点: 1. 试验筛校验记录表...
js 代码 1. /** 2. * 校验所有输入域是否含有特殊符号 3. * 所要过滤的符号写入正则表达式中,注意,一些符号要用'\'转义. 4. * 要转义的字符包括:1, 点号 . 5. * 2, 中括号 [] 6. * 3, 大括号 {} 7. ...
js自定义表格(只适用IE) 支持以下功能: 调整列宽 表格记录排序 各种数据校验 添加行和删除行 单元格回车跳转
MD5加密和JS 校验码MD5加密和JS 校验码MD5加密和JS 校验码MD5加密和JS 校验码MD5加密和JS 校验码
WPS 表格中校验身份证号码中的日期 在 WPS 表格中,_school验身份证号码中的日期是非常重要的一步骤,毕竟身份证号码中的日期信息是身份证号码的重要组成部分。下面,我们将详细介绍如何利用 WPS 表格中的 ET 格式...
js javaScript 验证校验小工具包
js 校验.txt
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
公共JS校验,提供了常见的JS前台表单校验
此文档中包含一些常用的js校验,例如:非空校验了啊,特殊符号的限制了啊,限制文本框输入格式啊等等
CRC 校验 编码,使用js实现CRC编码
校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE...
非常牛的js日期校验 非常牛的js日期校验
cron表达式校验,验证是否是正确的cron表达式,调用的主方法是function cronValidate(cronExpression ),有需要可以看一下
压缩包里面包含了很多页面的js校验
1.3 将日期格式由yyyy-MM-dd,转换为yyyymmdd,以直接比较两个日 期的大小.. 4 1.4 判断字符串是否全部由数字组成. 5 1.5 判断字符串是否全部由字母组成. 6 1.6 对于月和日,如果前面有零,去除,如 01 变为 1 .. 6 ...
一款纯javascript的校验框架,支撑动态的生成界面校验和静态的界面校验,十分实用,并且可以支撑自定义校验方法。 并且本人正在着手设计一套gme的平台,目前已经实现了很多快速开发经验的积累,有兴趣者可以联系...
里面有各种JavaScript数据类型校验的代码, 通过添加自定义标签属性统一验证表单数据的方法。
安全阀校验台帐(Word表格).doc
利用 POI统一对Execel表格文件的导入与校验,统一封装,以后勿需自己写逻辑代码,所有的都是可配置的。