基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit

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

扩展的源代码如下：

Ext.namespace('Ext.ux');

Ext.ux.submit = function(){

    var alpha = /^[a-zA-Z_]+$/;

    var alphanum =/^[a-zA-Z0-9_]+$/;

    var email =/^(/w+)([-+.][/w]+)*@(/w[-/w]*/.){1,5}([A-Za-z]){2,4}$/;

    var url =/(((https?)|(ftp)):////([/-/w]+/.)+/w{2,3}(//[%/-/w]+(/./w{2,})?)*(([/w/-/./?////+@&#;`~=%!]*)(/./w{2,})?)*//?)/i;

 

    return {

        emptyText : null,

        vtype:{

            'email' : function(v){

                return email.test(v);

            },

            'emailText' : '请输入正确的电子邮件地址，格式如：[e-mail]',

            'emailMask' : /[a-z0-9_/./-@]/i,

            'url' : function(v){

                return url.test(v);

            },

            'urlText' : '请输入正确的URL地址，格式如：http:/'+'/www.example.com"',

           

            'alpha' : function(v){

                return alpha.test(v);

            },

            'alphaText' : '该输入项只能包含字符和_',

            'alphaMask' : /[a-z_]/i,

            'alphanum' : function(v){

                return alphanum.test(v);

            },

            'alphanumText' : '该输入项只能包含字符,数字和_',

            'alphanumMask' : /[a-z0-9_]/i

          },

          run:function(opt){

            if(opt.id){

                var valid=true;

               if(Ext.isArray(opt.valid)){

                   for(var i=0;i<opt.valid.length;i++){

                       valid= valid & this.validateValue(opt.valid[i]);

                   }

                }

               if(valid){

                   var params={};

                   varels=Ext.fly(opt.id).select("input",true).each(function(el){

                       if(el.dom.id){

                           params[el.dom.id]=el.dom.value;

                       }

                   })

                   Ext.Ajax.request({

                       url:opt.url,

                       success:function(response,opts){

                           var o =Ext.decode(response.responseText);

                          if(o){

                            if(o.error.length>0){

                                for(vari=0;i<o.error.length;i++){

                                              var msgid='msg_'+o.error[i].id;

                                              console.log(msgid);

                                   Ext.fly(msgid).dom.innerHTML=o.error[i].msg;

                                   Ext.fly(msgid).setDisplayed("block");

                                }

                              }

                                if(o.msg)alert(o.msg);

                          }

                       },

                       failure:function(response,opts){

                             alert(response.responseText);

                       },

                       params:params

                   });

                }

            }

          },

            validateValue : function(o){

                    varel=Ext.getDom(o.id);

                    if(el){

                        var value=el.value.trim();

                        var msgel=Ext.get('msg_'+o.id);

             msgel.setDisplayed("none");

                        if(!o.allowBlank){

                            if(Ext.isEmpty(value)){

                                msgel.dom.innerHTML="请输入"+o.title+"！<br/>";

                              msgel.setDisplayed("block");

                              return false;

                            }

                        }

                        

                    if(o.minLength){

                    if(value.length < o.minLength){

                            msgel.dom.innerHTML= "请输入正确的"+o.title+"！";

                           msgel.setDisplayed("block");

                            return false;

                        }

                    }

                   

                    if(o.maxLength){

                    if(value.length > o.maxLength){

                            msgel.dom.innerHTML= "请输入正确的"+o.title+"！";

                           msgel.setDisplayed("block");

                            return false;

                        }

                    }

                    if(o.vtype){

                        if(!this.vtype[o.vtype](value,this)){

                            msgel.dom.innerHTML =  this.vtype[o.vtype +'Text'];

                           msgel.setDisplayed("block");

                            return false;

                        }

                    }

                    return true;

                   

                    }

   

            },

    };

}();

要使用该扩展，有以下规则必须遵守：

1、  input元件和form元件必须设置id属性

2、  显示错误信息的元件的id必须已“msg_”开头，后面跟input的id，譬如以下代码

          <divclass="item"><label>用户名称：</label><divclass="element"><input type="text"id="username" value=""/><spanid="msg_username"class="error"></span></div></div>

代码中input的id为“username”，则错误信息的元件id必须为“msg_username”。

3、  run方法的参数必须是JSON格式，且必须包含id、url两个属性。Id属性表示form的id。url属性表示要提交的服务端地址。如果包含校验信息，需要将校验信息以数组形式，且属性为vaild，譬如以下代码。

Ext.ux.submit.run({

id:"form1",

url:"test.asp?act=1",

valid:[

    {id:'username',title:'用户'},

    {id:'email',title:'电子邮件',vtype:'email'},

    {id:'age',title:'年龄',maxLength:2,minLength:1},

    {id:'url',title:'个人主页',vtype:'url'}

]

});

})

4、  目前支持的校验方式如下：

•        是否允许空白：设置allowBlank属性为true表示允许空白

•         字符长度范围：属性minLength表示最短长度，maxLength表示最大长度

•         电子邮件：设置vtype属性为“email”

•      网址：设置vtype属性为“url”

•       纯字母：设置vtype属性为“alpha”

•      字母+数字：设置vtype属性为“alphanum”

5、  服务器端验证错误信息须设置在error属性里，而且须以数组形式设置。譬如以下代码。

        response.write"{error:[{id:'username',msg:'请输入正确的用户名'}],msg:''}"

JSON结构中的id属性为input元件的id属性，msg属性表示要显示的信息。

6、  目前这个扩展的服务器端信息显示是使用alert方法，如果需要使用其它形式，请自行修改扩展代码。

 

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

 

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