基于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' : ' 请输入正确的电子邮件地址，格式如： [email protected]',

            '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++){

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

                    }

                }

                if(valid){

                    var params={};

                    var els=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(var i=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){

                    var el=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 ，譬如以下代码

<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 ，譬如以下代码。

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