近期因为工作需要，需要使用 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++){ 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 ，或者有什么好的建议和意见，请留言或发邮件给我，多谢！希望这个扩展对大家有帮助。
