很实用的Jquery验证插件
以前写前端验证脚本，用了一堆的JS，甚至有了自己的一套比较全面的JS文件，然而不时也会出现各个浏览器之间不兼容的情况，发现错误也比较困难，今年年初开始试着用JQuey之后，才发现Js可以写得如此方便和快捷，最近在验证方面，用了jquery.validate(http://bassistance.de/jquery-plugins/jquery-plugin-validation/),用起来更多方便，网上关于怎么用实例一大堆，下面贴一个Jquery动态操作表格和多行记录同时提交的Js的例子
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="localization/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
var i = 0;
//初始化各表单控件ID
function initControlName()
{
var k=1;
$("input[name='id']").each(function () {
$(this).parents("tr").find("select").each(
function()
{
if($(this).attr("name")!="id")$(this).attr("name",$(this).attr("name").split('_')[0]+"_"+k);
}
);
$(this).parents("tr").find("input").each(
function()
{
if($(this).attr("name")!="id")$(this).attr("name",$(this).attr("name").split('_')[0]+"_"+k);
if($(this).attr("name").split('_')[0]=="mc")
{
//动态验证
$(this).rules("add", { required: true});
}
}
);
k++;
});
//写入多少行数
$("#itmes_sl").val(i);
}
$().ready(function() {
var run=false;
$("#listItemTable tr").eq(1).hide();
$("#form1").validate({
rules: {
xxx: "required",
}
});
//向上插入行
$("#btninsertAfter").click(function ()
{
var tr=$("#listItemTable tr").eq(1).clone();
var sourcetr=$("input[name='id']:checked").parents("tr");
tr.show();
tr.insertAfter(sourcetr);
initControlName();
});
//向下插入行
$("#btninsertBefore").click(function ()
{
var tr=$("#listItemTable tr").eq(1).clone();
var sourcetr=$("input[name='id']:checked").parents("tr");
tr.show();
tr.insertBefore(sourcetr);
initControlName();
});
$("#btnAdd").click(function () {
//复制一行
var tr=$("#listItemTable tr").eq(1).clone();//$(this).parents("tr");
tr.show();
tr.appendTo("#listItemTable");
i++;
if(run)initControlName();
});
//删除行
$("#btnDel").click(function () {
$("input[name='id']:checked").each(function () {
$(this).parents("tr").remove();
i--;
}
);
initControlName();
});
//初始化行
for(var n=0;n<5;n++)
{
$("#btnAdd").click();
}
$("#itmes_sl").val(5);
initControlName();
//初如化下拉列表
var l=0;
$("select[name^='jbytlx']").each(function () {
$(this).attr("selectedIndex",l);
l++;
});
run=true;
});
</script>
</head>
<body>
<div class="pageContent">
<form id="form1" name="form1" method="post" >
<input name="flag" type="hidden" value="save" />
<h1 align="center">分类汇总</h1>
<br />
<br/>
文本A：
<input name="xxx" type="text" class="text" id="xxx" size="50" />
<br />
文本B：
<input name="yyy" type="text" class="text" id="yyy" />
日期：
<input name="dcrq" type="text" class="text" id="dcrq" value="" />
<br />
<br />
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#000000" id="listItemTable">
<tr>
<td width="100" align="center" bgcolor="#FFFFFF">序号 </td>
<td align="center" bgcolor="#FFFFFF">下拉框</td>
<td align="center" bgcolor="#FFFFFF">文本1</td>
<td align="center" bgcolor="#FFFFFF">文本2</td>
<td align="center" bgcolor="#FFFFFF">文本3</td>
<td align="center" bgcolor="#FFFFFF">文本4</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><label>
<input type="radio" name="id" id="id" />
</label></td>
<td bgcolor="#FFFFFF">
<select name="jbytlx_id" id="jbytlx_id">
<option>请选择...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> </td>
<td bgcolor="#FFFFFF"><input name="mc_0" type="text" class="noborder" size="8" id="mc_0" /></td>
<td bgcolor="#FFFFFF"><input name="t2_0" type="text" class="noborder" size="8" id="t2_0"/></td>
<td bgcolor="#FFFFFF"><input name="t3_0" type="text" class="noborder" size="8" id="t3_0"/></td>
<td bgcolor="#FFFFFF"><input name="t4_0" type="text" class="noborder" size="8" id="t4_0"/></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#000000" id="listItemTable">
<tr>
<td width="100" align="center" nowrap="nowrap" bgcolor="#FFFFFF">
说明 </td>
<td height="150" colspan="10" bgcolor="#FFFFFF"><textarea name="sm" cols="45" rows="10" class="noborder" id="sm"></textarea></td>
</tr>
</table>
<br/>
<input type="button" name="btnAdd" id="btnAdd" value="新增行" />
<input type="button" name="btnDel" id="btnDel" value="删除行" />
<input type="button" name="btninsertAfter" id="btninsertAfter" value="向后插入行" />
<input type="button" name="btninsertBefore" id="btninsertBefore" value="向上插入行" />
<br/>
<input name="itmes_sl" id="itmes_sl" type="hidden" value="0" />
<div align="center">
<input type="submit" name="button" id="button" value="提交" />
</div>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="localization/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
var i = 0;
//初始化各表单控件ID
function initControlName()
{
var k=1;
$("input[name='id']").each(function () {
$(this).parents("tr").find("select").each(
function()
{
if($(this).attr("name")!="id")$(this).attr("name",$(this).attr("name").split('_')[0]+"_"+k);
}
);
$(this).parents("tr").find("input").each(
function()
{
if($(this).attr("name")!="id")$(this).attr("name",$(this).attr("name").split('_')[0]+"_"+k);
if($(this).attr("name").split('_')[0]=="mc")
{
//动态验证
$(this).rules("add", { required: true});
}
}
);
k++;
});
//写入多少行数
$("#itmes_sl").val(i);
}
$().ready(function() {
var run=false;
$("#listItemTable tr").eq(1).hide();
$("#form1").validate({
rules: {
xxx: "required",
}
});
//向上插入行
$("#btninsertAfter").click(function ()
{
var tr=$("#listItemTable tr").eq(1).clone();
var sourcetr=$("input[name='id']:checked").parents("tr");
tr.show();
tr.insertAfter(sourcetr);
initControlName();
});
//向下插入行
$("#btninsertBefore").click(function ()
{
var tr=$("#listItemTable tr").eq(1).clone();
var sourcetr=$("input[name='id']:checked").parents("tr");
tr.show();
tr.insertBefore(sourcetr);
initControlName();
});
$("#btnAdd").click(function () {
//复制一行
var tr=$("#listItemTable tr").eq(1).clone();//$(this).parents("tr");
tr.show();
tr.appendTo("#listItemTable");
i++;
if(run)initControlName();
});
//删除行
$("#btnDel").click(function () {
$("input[name='id']:checked").each(function () {
$(this).parents("tr").remove();
i--;
}
);
initControlName();
});
//初始化行
for(var n=0;n<5;n++)
{
$("#btnAdd").click();
}
$("#itmes_sl").val(5);
initControlName();
//初如化下拉列表
var l=0;
$("select[name^='jbytlx']").each(function () {
$(this).attr("selectedIndex",l);
l++;
});
run=true;
});
</script>
</head>
<body>
<div class="pageContent">
<form id="form1" name="form1" method="post" >
<input name="flag" type="hidden" value="save" />
<h1 align="center">分类汇总</h1>
<br />
<br/>
文本A：
<input name="xxx" type="text" class="text" id="xxx" size="50" />
<br />
文本B：
<input name="yyy" type="text" class="text" id="yyy" />
日期：
<input name="dcrq" type="text" class="text" id="dcrq" value="" />
<br />
<br />
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#000000" id="listItemTable">
<tr>
<td width="100" align="center" bgcolor="#FFFFFF">序号 </td>
<td align="center" bgcolor="#FFFFFF">下拉框</td>
<td align="center" bgcolor="#FFFFFF">文本1</td>
<td align="center" bgcolor="#FFFFFF">文本2</td>
<td align="center" bgcolor="#FFFFFF">文本3</td>
<td align="center" bgcolor="#FFFFFF">文本4</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><label>
<input type="radio" name="id" id="id" />
</label></td>
<td bgcolor="#FFFFFF">
<select name="jbytlx_id" id="jbytlx_id">
<option>请选择...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> </td>
<td bgcolor="#FFFFFF"><input name="mc_0" type="text" class="noborder" size="8" id="mc_0" /></td>
<td bgcolor="#FFFFFF"><input name="t2_0" type="text" class="noborder" size="8" id="t2_0"/></td>
<td bgcolor="#FFFFFF"><input name="t3_0" type="text" class="noborder" size="8" id="t3_0"/></td>
<td bgcolor="#FFFFFF"><input name="t4_0" type="text" class="noborder" size="8" id="t4_0"/></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#000000" id="listItemTable">
<tr>
<td width="100" align="center" nowrap="nowrap" bgcolor="#FFFFFF">
说明 </td>
<td height="150" colspan="10" bgcolor="#FFFFFF"><textarea name="sm" cols="45" rows="10" class="noborder" id="sm"></textarea></td>
</tr>
</table>
<br/>
<input type="button" name="btnAdd" id="btnAdd" value="新增行" />
<input type="button" name="btnDel" id="btnDel" value="删除行" />
<input type="button" name="btninsertAfter" id="btninsertAfter" value="向后插入行" />
<input type="button" name="btninsertBefore" id="btninsertBefore" value="向上插入行" />
<br/>
<input name="itmes_sl" id="itmes_sl" type="hidden" value="0" />
<div align="center">
<input type="submit" name="button" id="button" value="提交" />
</div>
</form>
</div>
</body>
</html>
