基于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++){
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