很实用的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" > &nbsp;
      说明  </ 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 >

 

 

转载于:https://www.cnblogs.com/hubj/archive/2010/07/09/1774416.html