<!-- [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' : '
请输入正确的电子邮件地址,格式如:
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;
}
},
};
}();
要使用该扩展,有以下规则必须遵守:
<!-- [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]-->
<!-- [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
分享到:
相关推荐
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
ext_表单提交_数据校验 ext_表单提交_数据校验
Ext.ux.UploadDialog UploadDialog Ext.ux.UploadDialog扩展 Ext扩展
Ext.ux.tree.treegrid异步加载,点击节点加载数据
EXTjs的上传组件
ext.ux.uploadDialog实例
Ext+SwfUpload做的一个多文件上传的插件.
[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree
带复选框的这是经过测试可以用的下拉树
Ext.ux.UploadDialog批量上传文件应用,后台采用com.jspsmart.upload.SmartUpload。myeclipse工程,导入即可运行。
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接
Ext.ux.touch.DateTimePicker 该扩展通过扩展 Ext.Picker 为 Sencha Touch 框架提供了一个 DateTimePicker。用法datetimePicker = new Ext.ux.touch.DateTimePicker({ useTitles: true, id: 'dt', value: { day: 23,...
工程文件 博文链接:https://mutongwu.iteye.com/blog/693692
ext.ux.menu.storemenu.zip
Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;
11.18 Ext.ux.Portal ............................... 309 11.19 Ext.Desktop .................................... 312 11.20 本章小结.............................................. 316 第12 章 一个完整的...
EXT dojochina ExtAjax表单提交 L9.rar EXT dojochina ExtAjax表单提交 L9.rar