很实用的Jquery验证插件

左手的ㄟ右手 2021-11-02 04:16 396阅读 0赞

以前写前端验证脚本，用了一堆的JS，甚至有了自己的一套比较全面的JS文件，然而不时也会出现各个浏览器之间不兼容的情况，发现错误也比较困难，今年年初开始试着用JQuey之后，才发现Js可以写得如此方便和快捷，最近在验证方面，用了jquery.validate([http://bassistance.de/jquery-plugins/jquery-plugin-validation/][http_bassistance.de_jquery-plugins_jquery-plugin-validation]),用起来更多方便，网上关于怎么用实例一大堆，下面贴一个Jquery动态操作表格和多行记录同时提交的Js的例子

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

<! 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

[http_bassistance.de_jquery-plugins_jquery-plugin-validation]: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211102/e4b60c8ed5394fc9b2d42b7db8c379cc.png