不是一般地好用的jquery表單驗證插件-Validform

時間 2021-01-18

原文原文鏈接

之前博主推薦過jQuery Validate，因爲之前也在用，但是配置稍微顯得有些麻煩，直到最近的這個項目用到了validform，才讓我大開眼界，整個界面突然感覺太友好了，先來幾張效果圖吧。

整個過程引用的css及js非常少。

css如下：

 
          
       /*==========以下部分是Validform必須的===========*/ 
      
 
            
       /*==========可以根據自己喜好適當修改（所用圖標會在後面提供）===========*/ 
      
 
          
       .Validform_checktip{ 
      
 
            
       margin-left 
       : 
       8px 
       ; 
      
 
            
       line-height 
       : 
       20px 
       ; 
      
 
            
       height 
       : 
       20px 
       ; 
      
 
            
       overflow 
       : 
       hidden 
       ; 
      
 
            
       color 
       : 
       #999 
       ; 
      
 
            
       font-size 
       : 
       12px 
       ; 
      
 
          
       } 
      
 
          
       .Validform_right{ 
      
 
            
       color 
       : 
       #71b83d 
       ; 
      
 
            
       padding-left 
       : 
       20px 
       ; 
      
 
            
       background 
       : 
       url 
       (/Public/home/images/ 
       right 
       .png)  
       no-repeat  
       left  
       center 
       ; 
      
 
          
       } 
      
 
          
       .Validform_wrong{ 
      
 
            
       color 
       : 
       red 
       ; 
      
 
            
       padding-left 
       : 
       20px 
       ; 
      
 
            
       white-space 
       : 
       nowrap 
       ; 
      
 
            
       background 
       : 
       url 
       (/Public/home/images/error.png)  
       no-repeat  
       left  
       center 
       ; 
      
 
          
       } 
      
 
          
       .Validform_loading{ 
      
 
            
       padding-left 
       : 
       20px 
       ; 
      
 
            
       background 
       : 
       url 
       (/Public/home/images/onLoad.gif)  
       no-repeat  
       left  
       center 
       ; 
      
 
          
       } 
      
 
          
       .Validform_error{ 
      
 
            
       background-color 
       : 
       #ffe7e7 
       ; 
      
 
          
       } 
      
 
          
       #Validform_msg{ 
       color 
       : 
       #7d8289 
       ;  
       font 
       :  
       12px 
       / 
       1.5  
       tahoma 
       ,  
       arial 
       , \ 
       5 
       b 
       8 
       b\ 
       4 
       f 
       53 
       ,  
       sans-serif 
       ;  
       width 
       : 
       280px 
       ; -webkit-box-shadow: 
       2px  
       2px  
       3px  
       #aaa 
       ; -moz-box-shadow: 
       2px  
       2px  
       3px  
       #aaa 
       ;  
       background 
       : 
       #fff 
       ;  
       position 
       : 
       absolute 
       ;  
       top 
       : 
       0px 
       ;  
       right 
       : 
       50px 
       ;  
       z-index 
       : 
       99999 
       ;  
       display 
       : 
       none 
       ;filter: progid:DXImageTransform.Microsoft.Shadow(Strength= 
       3 
       , Direction= 
       135 
       , Color= 
       '#999999' 
       );} 
      
 
          
       #Validform_msg .iframe{ 
       position 
       : 
       absolute 
       ;  
       left 
       : 
       0px 
       ;  
       top 
       : 
       -1px 
       ;  
       z-index 
       : 
       -1 
       ;} 
      
 
          
       #Validform_msg .Validform_title{ 
       line-height 
       : 
       25px 
       ;  
       height 
       : 
       25px 
       ;  
       text-align 
       : 
       left 
       ;  
       font-weight 
       : 
       bold 
       ;  
       padding 
       : 
       0  
       8px 
       ;  
       color 
       : 
       #fff 
       ;  
       position 
       : 
       relative 
       ;  
       background-color 
       : 
       #000 
       ;} 
      
 
          
       #Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{ 
       line-height 
       : 
       22px 
       ;  
       position 
       : 
       absolute 
       ;  
       right 
       : 
       8px 
       ;  
       top 
       : 
       0px 
       ;  
       color 
       : 
       #fff 
       ;  
       text-decoration 
       : 
       none 
       ;} 
      
 
          
       #Validform_msg a.Validform_close:hover{ 
       color 
       : 
       #cc0 
       ;} 
      
 
          
       #Validform_msg .Validform_info{ 
       padding 
       : 
       8px 
       ; 
       border 
       : 
       1px  
       solid  
       #000 
       ;  
       border-top 
       : 
       none 
       ;  
       text-align 
       : 
       left 
       ;} 
      

js引用也不多，固定不變就行。

 
       <script type= 
       "text/javascript"  
       src= 
       "/Public/home/js/Validform_v5.3.2_min.js" 
       ></script> 
      
       <script type= 
       "text/javascript" 
       > 
      
       $( 
       function 
       (){   
      
       $( 
       "#signupform" 
       ).Validform({ 
       //給form表單取個id吧 
      
       tiptype:3, 
       //1,2,3呈現不同效果，可以自行嘗試，當然3是最好 
      
       showAllError: 
       true 
       //全部顯示錯誤提示，默認就行 
      
       }); 
      
       }) 
      
       </script>

接下來就是部分表單示例代碼：

 
       < 
       table  
       width 
       = 
       "80%" 
       > 
      
 
                    
       < 
       tr 
       > 
      
 
                      
       < 
       td  
       width 
       = 
       "100" 
       >用戶名</ 
       td 
       > 
      
 
                      
       < 
       td  
       width 
       = 
       "*" 
       >< 
       input  
       type 
       = 
       "text"  
       name 
       = 
       "username"  
       id 
       = 
       "username"  
       datatype 
       = 
       "s2-12"  
       nullmsg 
       = 
       "請輸入用戶名！"  
       errormsg 
       = 
       "暱稱至少2個字符,最多12個字符！"  
       ajaxurl="<?php echo U('user/checkName') ?>" placeholder="2-12個字符"/></ 
       td 
       > 
      
 
                       
      
 
                    
       </ 
       tr 
       > 
      
 
                    
       tr 
       > 
      
 
                    
       < 
       tr 
       > 
      
 
                      
       < 
       td  
       width 
       = 
       "100" 
       >設置密碼</ 
       td 
       > 
      
 
                      
       < 
       td 
       >< 
       input  
       type 
       = 
       "password"  
       name 
       = 
       "password"  
       id 
       = 
       "password"  
       datatypebaseline!important; width:auto!important; min-height:auto!important">               
       < 
      