很实用的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>

posted @ 2010-07-09 15:25 alex hu 阅读(286) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

很实用的Jquery验证插件

公告