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

<!-- [if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!-- [if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <!-- [if gte mso 10]> <mce:style><!-- /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} --> <!-- [endif]-->

近期因为工作需要，需要使用 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={};

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;

}

},

};

}();

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

<!-- [if !supportLists]-->1、 <!-- [endif]-->input 元件和 form 元件必须设置 id 属性

<!-- [if !supportLists]-->2、 <!-- [endif]-->显示错误信息的元件的 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 ”。

<!-- [if !supportLists]-->3、 <!-- [endif]-->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'}

]

});

})

<!-- [if !supportLists]-->4、 <!-- [endif]-->目前支持的校验方式如下：

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->

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

<!-- [endif]-->

<!-- [if !supportLists]-->5、 <!-- [endif]-->服务器端验证错误信息须设置在 error 属性里，而且须以数组形式设置。譬如以下代码。

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

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

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

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

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