Ext js 用户验证.doc

今天我们介绍的是Ext,作为一个功能强大的Ajax框架Ext拥有华丽的界面可以用在富客户端的开发上，彻底颠覆了人们对js的认识“原来脚本也不是想象中的麻烦”。如今已经有Ext 2.2的版本了。在Ext2.2的版本中添加了许多新的特性，特别是对GMap的支持,获得更多的信息请访问Ext官网、Ext中文社区。下面介绍一个基于Ext2.1进行用户验证注册的例子：一、主界面设计： (图一) (图二) (图三) (图四) (图五)以上的五张图就为我们完整的展示了这个例子,接下来我们着重介绍代码部分。二、代码逻辑设计：12Ext.onReady(function()3Ext.QuickTips.init();4Ext.form.Ftotype.msgTarget=side;56varIsExsit=false;7varregform=newExt.form.FormPanel(8labelWidth:80,9frame:true,10monitorValid:true,/进行表单验证11defaultType:textfield,12items:13fieldLabel:用户名,14id:txtusername,15name:username,16width:150,17labelAlign:right,18validator:function()1920 /本方法亦可以使用下面被注释的部分代替21varusername=Ext.get(username).dom.value;22Ext.Ajax.request(23url:CheckUserName.aspx,24params:name:username,25success:function(response,options)26vardata=Ext.util.JSON.decode(response.responseText);27if(data.success=true)ReturnValue(true);28elseReturnValue(false);/不能在success方法里面直接返回。2930);31functionReturnValue(ok)32IsExsit=ok;3334returnIsExsit;35,36invalidText:用户已经存在,37emptyText:请输入用户名,38allowBlank:false,39blankText:请输入用户名！40,4142 inputType:password,43fieldLabel:密码,44id:pwd1,45name:pwd1,47width:150,48labelAlign:right,49allowBlank:false,50blankText:密码不能为空！51,5253inputType:password,54fieldLabel:确认密码,55id:pwd2,56name:pwd2,5758width:150,59labelAlign:right,60allowBlank:false,61blankText:确认密码不能为空！,62validator:function()6364if(Ext.get(pwd1).dom.value!=Ext.get(pwd2).dom.value)6566returnfalse;6768else6970returntrue;7172,73invalidText:两次密码不一致！7475,76buttons:77text:注册,78xtype:submit,79formBind:true,80handler:function()8182Ext.MessageBox.show(83wait:true,84title:请稍侯,85width:150,86progressText:saving,87waitConfig:interval:200,duration:2000,fn:function()88Ext.MessageBox.hide();89Ext.MessageBox.alert(恭喜,注册成功！);90win.hide();9192);939495,9697text:取消,98handler:function()99100regform.form.reset();101102103104);105106107/varIsExsit=false;/此变量一定要在方法外面定义108/functionCheckUserName()/检查用户名是否存在109/varusername=Ext.get(username).dom.value;110/Ext.Ajax.request(111/url:CheckUserName.aspx,112/params:name:username,113/success:function(response,options)114/vardata=Ext.util.JSON.decode(response.responseText);115/if(data.success=true)116/ReturnValue(true);117/else118/ReturnValue(false);/不能在success里面直接return119/120/121/);122/123/functionReturnValue(ok)/此方法必须放CheckUserName里面。124/IsExsit=ok;125/126/returnIsExsit;127/128129varwin=newExt.Window(130title:Ext例子,131width:300,132height:200,133/modal:true,134shadow:sides,135shadowOffset:50,136