easyUI自定義validatebox.

1 自定義validatebox驗證，驗證用戶名，密碼。

2 使用方法

  
 
 
    
 
   使用方法  
 
   < 
 
   form  
 
   name 
 
   ="_validate" 
 
     
 
   > 
 
     
 
   < 
 
   label 
 
   > 
 
   用戶名： 
 
   </ 
 
   label 
 
   >< 
 
   input  
 
   class 
 
   ="easyui-validatebox" 
 
    missingMessage 
 
   ="請輸入用戶名." 
 
    validType 
 
   ="name" 
 
    required 
 
   ="true" 
 
     
 
   />< 
 
   br 
 
   /> 
 
     
 
   < 
 
   label 
 
   > 
 
   密 
 
   &nbsp;&nbsp;&nbsp; 
 
   碼： 
 
   </ 
 
   label 
 
   >< 
 
   input  
 
   type 
 
   ="password" 
 
    class 
 
   ="easyui-validatebox" 
 
    missingMessage 
 
   ="請輸入密碼." 
 
    validType 
 
   ="pwd[6,8]" 
 
    required 
 
   ="true" 
 
     
 
   />< 
 
   br 
 
   /> 
 
     
 
   </ 
 
   form 
 
   > 
 
     
 
   < 
 
   button  
 
   onclick 
 
   ="go()" 
 
   > 
 
   提交 
 
   </ 
 
   button 
 
   > 

  

3 javascript 定義驗證規則

自定義規則，重載$.fn.validatebox.defaults.

name：驗證用戶名是否存在。

pwd：驗證密碼，長度在6-8位之間。

注意：爲了防止表單提交時無效，當用戶點擊提交按鈕的形式，咱們應該防止的形式提交的表格無效。加上$('_validate').form('validate')進行驗證。

  
 
 
    
 
   < 
 
   script  
 
   type 
 
   ="text/javascript" 
 
   > 
 
    $(document).ready( 
 
   function 
 
   (){  
 
   // 
 
   自定義validatebox的驗證方法 
 
     
 
    $.extend($.fn.validatebox.defaults.rules, { name: { validator:  
 
   function 
 
   (value){  
 
   var 
 
    flag; $.ajax({ type:  
 
   ' 
 
   POST 
 
   ' 
 
   , url:  
 
   ' 
 
   <c:url value="/ValidateBox/ValidName.do"/> 
 
   ' 
 
   , data: 
 
   ' 
 
   name= 
 
   ' 
 
   + 
 
   value, async: 
 
   false 
 
   , success:  
 
   function 
 
   (data) {  
 
   if 
 
   (data 
 
   == 
 
   ' 
 
   success 
 
   ' 
 
   ) { flag  
 
   = 
 
     
 
   true 
 
   ; } 
 
   else 
 
   { flag  
 
   = 
 
     
 
   false 
 
   ; } } });  
 
   return 
 
    flag; }, message:  
 
   ' 
 
   您輸入的用戶名已存在，請更換。 
 
   ' 
 
    }, pwd: { validator:  
 
   function 
 
   (value,param){  
 
   return 
 
    value.length 
 
   >= 
 
   param[ 
 
   0 
 
   ]  
 
   && 
 
    value.length 
 
   <= 
 
   param[ 
 
   1 
 
   ]; }, message:  
 
   ' 
 
   密碼長度在{0}-{1}之間。 
 
   ' 
 
    } }); });  
 
   function 
 
    go() {  
 
   if 
 
   ($( 
 
   ' 
 
   _validate 
 
   ' 
 
   ).form( 
 
   ' 
 
   validate 
 
   ' 
 
   )) { alert( 
 
   11 
 
   ); } }  
 
   </ 
 
   script 
 
   > 

  

4 後臺用戶名驗證代碼

  
 
 
    
 
   package 
 
    cn.zyc.validatebox;  
 
   import 
 
    java.io.IOException;  
 
   import 
 
    java.io.PrintWriter;  
 
   import 
 
    java.util.ArrayList;  
 
   import 
 
    java.util.List;  
 
   import 
 
    javax.servlet.http.HttpServletResponse;  
 
   import 
 
    org.springframework.stereotype.Controller;  
 
   import 
 
    org.springframework.web.bind.annotation.RequestMapping; @Controller(value  
 
   = 
 
     
 
   " 
 
   validateBoxController 
 
   " 
 
   ) @RequestMapping( 
 
   " 
 
   /ValidateBox 
 
   " 
 
   )  
 
   public 
 
     
 
   class 
 
    ValidateBoxController {  
 
   /** 
 
    * 驗證用戶名是否存在  
 
   */ 
 
    @RequestMapping(value  
 
   = 
 
     
 
   " 
 
   /ValidName.do 
 
   " 
 
   )  
 
   public 
 
     
 
   void 
 
    validName(String name, HttpServletResponse response)  
 
   throws 
 
    Exception { List 
 
   < 
 
   String 
 
   > 
 
    names  
 
   = 
 
     
 
   new 
 
    ArrayList 
 
   < 
 
   String 
 
   > 
 
   (); names.add( 
 
   " 
 
   wade 
 
   " 
 
   ); names.add( 
 
   " 
 
   james 
 
   " 
 
   ); names.add( 
 
   " 
 
   kobe 
 
   " 
 
   );  
 
   try 
 
    {  
 
   if 
 
   (names.contains(name)) { writer(response,  
 
   " 
 
   failure 
 
   " 
 
   ); } 
 
   else 
 
   { writer(response,  
 
   " 
 
   success 
 
   " 
 
   ); } }  
 
   catch 
 
    (Exception e) { writer(response,  
 
   " 
 
   error 
 
   " 
 
   ); } }  
 
   private 
 
     
 
   static 
 
     
 
   void 
 
    writer(HttpServletResponse response,String str){  
 
   try 
 
    {  
 
   // 
 
   設置頁面不緩存 
 
     
 
    response.setHeader( 
 
   " 
 
   Pragma 
 
   " 
 
   ,  
 
   " 
 
   No-cache 
 
   " 
 
   ); response.setHeader( 
 
   " 
 
   Cache-Control 
 
   " 
 
   ,  
 
   " 
 
   no-cache 
 
   " 
 
   ); response.setCharacterEncoding( 
 
   " 
 
   UTF-8 
 
   " 
 
   ); response.setContentType( 
 
   " 
 
   text/html 
 
   " 
 
   ); PrintWriter out 
 
   = 
 
     
 
   null 
 
   ; out  
 
   = 
 
    response.getWriter(); out.print(str); out.flush(); out.close(); }  
 
   catch 
 
    (IOException e) { e.printStackTrace(); } } } 

  

5 validatebox屬性及方法

屬性

名稱	類型	描述	默認值
required（必填）	boolean（布爾型）	定義表單域必須填寫。	false
validType（驗證類型）	string（字符串）	定義表單域的驗證類型，好比：email, url等。	null
missingMessage（未填提示）	string（字符串）	當表單域未填寫時出現的提示信息。	This field is required.
invalidMessage（無效提示）	string（字符串）	當表單域的內容被驗證爲無效時出現的提示。	null

方法

名稱	參數	描述
destroy	none	移除並註銷組件。
validate	none	驗證表單域的內容是否有效。
isValid	none	調用validate方法而且返回驗證結果，true或者false。