基于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' : '
请输入正确的电子邮件地址，格式如：
user@example.com',



'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={};



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