近期因为工作需要，需要使用 Ext Core ，但是目前 Core 的扩展太少了，尤其是基于表单验证及提交的，基本没有，如果使用 Ext 本身的功能，那么库大小又增加不少。在研究了 Ext.form.Field 的代码和 vtype 代码后，决定自己写一个集成验证功能的表单提交扩展。

扩展的源代码如下：

 

 
  
  1. Ext.namespace('Ext.ux');   
  2.  
  3. Ext.ux.submit = function(){   
  4.  
  5.     var alpha = /^[a-zA-Z_]+$/;   
  6.  
  7.     var alphanum = /^[a-zA-Z0-9_]+$/;   
  8.  
  9.     var email = /^(/w+)([-+.][/w]+)*@(/w[-/w]*/.){1,5}([A-Za-z]){2,4}$/;   
  10.  
  11.     var url = /(((https?)|(ftp)):([/-/w]+/.)+/w{2,3}(//[%/-/w]+(/./w{2,})?)*(([/w/-/./?+@&#;`~=%!]*)(/./w{2,})?)*//?)/i;   
  12.  
  13.     
  14.  
  15.      return {   
  16.  
  17.         emptyText : null,   
  18.  
  19.         vtype:{   
  20.  
  21.             'email' : function(v){   
  22.  
  23.                 return email.test(v);   
  24.  
  25.             },   
  26.  
  27.             'emailText' : ' 请输入正确的电子邮件地址，格式如： user@example.com',   
  28.  
  29.             'emailMask' : /[a-z0-9_/./-@]/i,   
  30.  
  31.             'url' : function(v){   
  32.  
  33.                 return url.test(v);   
  34.  
  35.             },   
  36.  
  37.             'urlText' : ' 请输入正确的 URL 地址，格式如： http:/'+'/www.example.com"',   
  38.  
  39.               
  40.  
  41.             'alpha' : function(v){   
  42.  
  43.                 return alpha.test(v);   
  44.  
  45.             },   
  46.  
  47.             'alphaText' : ' 该输入项只能包含字符和 _',   
  48.  
  49.             'alphaMask' : /[a-z_]/i,   
  50.  
  51.             'alphanum' : function(v){   
  52.  
  53.                 return alphanum.test(v);   
  54.  
  55.             },   
  56.  
  57.             'alphanumText' : ' 该输入项只能包含字符 , 数字和 _',   
  58.  
  59.             'alphanumMask' : /[a-z0-9_]/i   
  60.  
  61.           },   
  62.  
  63.           run:function(opt){   
  64.  
  65.             if(opt.id){   
  66.  
  67.                 var valid=true;   
  68.  
  69.                 if(Ext.isArray(opt.valid)){   
  70.  
  71.                     for(var i=0;i<opt.valid.length;i++){   
  72.  
  73.                         validvalid= valid & this.validateValue(opt.valid[i]);   
  74.  
  75.                     }   
  76.  
  77.                 }   
  78.  
  79.                 if(valid){   
  80.  
  81.                     var params={};   
  82.  
  83.                     var els=Ext.fly(opt.id).select("input",true).each(function(el){   
  84.  
  85.                         if(el.dom.id){   
  86.  
  87.                             params[el.dom.id]=el.dom.value;   
  88.  
  89.                         }   
  90.  
  91.                     })   
  92.  
  93.                     Ext.Ajax.request({   
  94.  
  95.                         url:opt.url,   
  96.  
  97.                         success:function(response,opts){   
  98.  
  99.                             var o = Ext.decode(response.responseText);   
  100.  
  101.                            if(o){   
  102.  
  103.                              if(o.error.length>0){   
  104.  
  105.                                 for(var i=0;i<o.error.length;i++){   
  106.  
  107.                                               var msgid='msg_'+o.error[i].id;   
  108.  
  109.                                               console.log(msgid);   
  110.  
  111.                                     Ext.fly(msgid).dom.innerHTML=o.error[i].msg;   
  112.  
  113.                                     Ext.fly(msgid).setDisplayed("block");   
  114.  
  115.                                  }   
  116.  
  117.                               }   
  118.  
  119.                                 if(o.msg) alert(o.msg);   
  120.  
  121.                            }   
  122.  
  123.                         },   
  124.  
  125.                         failure:function(response,opts){   
  126.  
  127.                               alert(response.responseText);   
  128.  
  129.                         },   
  130.  
  131.                         params:params   
  132.  
  133.                     });   
  134.  
  135.                 }   
  136.  
  137.             }   
  138.  
  139.           },   
  140.  
  141.             validateValue : function(o){   
  142.  
  143.                     var el=Ext.getDom(o.id);   
  144.  
  145.                     if(el){   
  146.  
  147.                          var value=el.value.trim();   
  148.  
  149.                          var msgel=Ext.get('msg_'+o.id);   
  150.  
  151.               msgel.setDisplayed("none");   
  152.  
  153.                          if(!o.allowBlank){   
  154.  
  155.                              if(Ext.isEmpty(value)){   
  156.  
  157.                                  msgel.dom.innerHTML=" 请输入 "+o.title+" ！ <br/>";   
  158.  
  159.                                msgel.setDisplayed("block");   
  160.  
  161.                                return false;   
  162.  
  163.                              }   
  164.  
  165.                          }   
  166.  
  167.                            
  168.  
  169.                     if(o.minLength){   
  170.  
  171.                      if(value.length < o.minLength){   
  172.  
  173.                             msgel.dom.innerHTML = " 请输入正确的 "+o.title+" ！ ";   
  174.  
  175.                             msgel.setDisplayed("block");   
  176.  
  177.                             return false;   
  178.  
  179.                         }   
  180.  
  181.                     }   
  182.  
  183.                       
  184.  
  185.                     if(o.maxLength){   
  186.  
  187.                      if(value.length > o.maxLength){   
  188.  
  189.                             msgel.dom.innerHTML = " 请输入正确的 "+o.title+" ！ ";   
  190.  
  191.                             msgel.setDisplayed("block");   
  192.  
  193.                             return false;   
  194.  
  195.                         }   
  196.  
  197.                     }   
  198.  
  199.                     if(o.vtype){   
  200.  
  201.                         if(!this.vtype[o.vtype](value, this)){   
  202.  
  203.                             msgel.dom.innerHTML =  this.vtype[o.vtype +'Text'];   
  204.  
  205.                             msgel.setDisplayed("block");   
  206.  
  207.                             return false;   
  208.  
  209.                         }   
  210.  
  211.                     }   
  212.  
  213.                     return true;   
  214.  
  215.                       
  216.  
  217.                     }   
  218.  
  219.       
  220.  
  221.             },   
  222.  
  223.     };   
  224.  
  225. }();  
 
  
要使用该扩展，有以下规则必须遵守：
 
  
 
   1、input 元件和 form 元件必须设置 id 属性 
  
 
  
 
   2、显示错误信息的元件的 id 必须已“ msg_ ”开头，后面跟 input 的 id ，譬如以下代码 
  
 
  
 
  
  1. <div class="item"><label> 用户名称： </label><div class="element"><input type="text" id="username" value=""/><span id="msg_username" class="error"></span></div></div> 
 
  
代码中 input 的 id 为“ username ”，则错误信息的元件 id 必须为“ msg_username ”。
 
  
 
   3、run 方法的参数必须是 JSON 格式，且必须包含 id 、 url 两个属性。 Id 属性表示 form 的 id 。 url 属性表示要提交的服务端地址。如果包含校验信息，需要将校验信息以数组形式，且属性为 vaild ，譬如以下代码。 
  
 
  
 
  
  1. Ext.ux.submit.run({   
  2.  
  3. id:"form1",   
  4.  
  5. url:"test.asp?act=1",   
  6.  
  7. valid:[   
  8.  
  9.     {id:'username',title:' 用户 '},   
  10.  
  11.     {id:'email',title:' 电子邮件 ',vtype:'email'},   
  12.  
  13.     {id:'age',title:' 年龄 ',maxLength:2,minLength:1},   
  14.  
  15.     {id:'url',title:' 个人主页 ',vtype:'url'}   
  16.  
  17. ]   
  18.  
  19. });   
  20.  
  21. })  
 
  
4、目前支持的校验方式如下：
 
  
  • 是否允许空白：设置 allowBlank 属性为 true 表示允许空白
 
  
  • 字符长度范围：属性 minLength 表示最短长度， maxLength 表示最大长度
 
  
  • 电子邮件：设置 vtype 属性为“ email ”
 
  
  • 网址：设置 vtype 属性为“ url ”
 
  
  • 纯字母：设置 vtype 属性为“ alpha ”
 
  
  • 字母 + 数字：设置 vtype 属性为“ alphanum ”
 
  
 
   5、服务器端验证错误信息须设置在 error 属性里，而且须以数组形式设置。譬如以下代码。 
  
 
  
 
 
  
 
  
  1. response.write "{error:[{id:'username',msg:' 请输入正确的用户名 '}],msg:''}"  
 
  
JSON 结构中的 id 属性为 input 元件的 id 属性， msg 属性表示要显示的信息。
 
  
 
   6、目前这个扩展的服务器端信息显示是使用 alert 方法，如果需要使用其它形式，请自行修改扩展代码。 
  
 
  

    具体的使用方法请下载例子代码研究，再次我就不多说了。如果大家发现例子中有什么 bug ，或者有什么好的建议和意见，请留言或发邮件给我，多谢！希望这个扩展对大家有帮助。 
  
 
  

    本文的例子下载地址： 
   http://download.csdn.net/source/1633051