Ext用户验证

   抱歉各位，由于工作繁忙，很久没有写新文章了，在此感谢各位的支持！

   今天我们介绍的是Ext,作为一个功能强大的Ajax框架Ext拥有华丽的界面可以用在富客户端的开发上，彻底颠覆了人们对js的认识“原来脚本也不是想象中的麻烦”。如今已经有Ext 2.2的版本了。在Ext2.2的版本中添加了许多新的特性，特别是对GMap的支持,获得更多的信息请访问Ext官网、Ext中文社区。下面介绍一个基于Ext2.1进行用户验证注册的例子：

一、主界面设计：

 

                            (图一)

                        (图二)

          (图三)

                        (图四)

           (图五)

以上的五张图就为我们完整的展示了这个例子,接下来我们着重介绍代码部分。

二、代码逻辑设计：

 

  1  < script type = " text/javascript "   >
  2       Ext.onReady( function (){
  3          Ext.QuickTips.init();
  4          Ext.form.Field.prototype.msgTarget  =   ' side ' ;
  5          
  6          var  IsExsit = false ;
  7          var  regform = new  Ext.form.FormPanel({       
  8                 labelWidth: 80 ,
  9                 frame: true  ,
 10                  monitorValid: true , //进行表单验证
 11                 defaultType: ' textfield ' , 
 12                 items:[{
 13                   fieldLabel: " 用户名 " ,
 14                   id: " txtusername " ,
 15                   name: " username " ,
 16                   width: 150 ,
 17                   labelAlign: " right " ,
 18                   validator : function ()
 19                   {
 20                      //本方法亦可以使用下面被注释的部分代替
 21                    var  username  =  Ext.get( ' username ' ).dom.value;
 22                   Ext.Ajax.request({
 23                      url: ' CheckUserName.aspx ' ,
 24                      params:{name:username},
 25                      success:  function (response, options) {            
 26                          var  data  =  Ext.util.JSON.decode(response.responseText);             
 27                          if (data.success  ==   true )  ReturnValue( true );
 28                          else  ReturnValue( false );//不能在success方法里面直接返回。
 29                      }  
 30                  });
 31                  function  ReturnValue(ok){
 32                IsExsit  =  ok;
 33              }
 34               return  IsExsit; 
 35                   },
 36                   invalidText: " 用户已经存在 " ,
 37                   emptyText: " 请输入用户名 "  ,
 38                   allowBlank: false  ,
 39                   blankText: " 请输入用户名！ "
 40                 },
 41                 {
 42                  inputType: ' password ' ,
 43                  fieldLabel: " 密码 " ,
 44                 id: " pwd1 "  ,
 45                 name: " pwd1 "  ,
 47                 width: 150 ,
 48                 labelAlign: " right " ,
 49                 allowBlank: false  ,
 50                 blankText: " 密码不能为空！ "
 51                 },
 52                 {
 53                 inputType: ' password ' ,
 54                 fieldLabel: " 确认密码 " ,
 55                 id: " pwd2 "  ,
 56                 name: " pwd2 "  ,
 57                 
 58                 width: 150 ,
 59                 labelAlign: " right " ,
 60                 allowBlank: false  ,
 61                 blankText: " 确认密码不能为空！ " ,
 62                 validator: function ()
 63                 {
 64                     if (Ext.get( " pwd1 " ).dom.value != Ext.get( " pwd2 " ).dom.value)
 65                    {
 66                        return   false  ;
 67                    }
 68                     else
 69                    {
 70                       return   true ;
 71                    }
 72                 },
 73                 invalidText: " 两次密码不一致！ "
 74                 }
 75                 ],
 76                 buttons:[{
 77                   text: " 注册 " ,
 78                   xtype: " submit " ,
 79                   formBind: true ,
 80                   handler: function ()
 81                   { 
 82                      Ext.MessageBox.show({
 83                        wait: true  ,
 84                       title: " 请稍侯 " ,
 85                       width: 150 ,
 86                       progressText: " saving "  ,
 87                       waitConfig:{interval: 200 ,duration: 2000 ,fn: function (){
 88                           Ext.MessageBox.hide();
 89                            Ext.MessageBox.alert( " 恭喜 " , " 注册成功！ " );
 90                            win.hide();
 91                       }}
 92                      });
 93                     
 94                   }
 95                 },
 96                 {
 97                  text: " 取消 " ,
 98                 handler: function ()
 99                 {
100                    regform.form.reset();
101                 } 
102                 }
103                 ] 
104         });
105         
106         
107  //         var IsExsit=false;//此变量一定要在方法外面定义
108  //         function CheckUserName(){ //检查用户名是否存在
109  //             var username = Ext.get('username').dom.value;
110  //             Ext.Ajax.request({
111  //                 url:'CheckUserName.aspx',
112  //                 params:{name:username},
113  //                 success: function(response, options) {            
114  //                    var data = Ext.util.JSON.decode(response.responseText);             
115  //                    if(data.success == true){  
116  //                        ReturnValue(true);
117  //                    }else{  
118  //                        ReturnValue(false);//不能在success里面直接return
119  //                    }  
120  //                 }  
121  //             });
122  //             
123  //               function ReturnValue(ok){//此方法必须放CheckUserName里面。
124  //               IsExsit = ok;
125  //             }
126  //             return IsExsit;
127  //         }
128        
129         var  win = new  Ext.Window({
130           title: " Ext例子 " ,
131           width: 300 ,
132           height: 200 ,
133           //  modal:true,
134          shadow: " sides " ,
135          shadowOffset: 50 ,
136          closeAction: " hide " ,
137          closable: true ,
138          collapsible: true ,
139          maximizable: true ,
140          items:regform
141        });
142        
143        win.show(); 
144         
145       })
146      
147 
148      < / script>

当然想理解上面的代码,您也得对Ext这个强大的框架有一定的接触。好了，到这里为止整个例子的代码也都在这里了，由于本人初来乍到，可能有些疏漏或讲行晦涩的部分了，希望各位多多指教！

另外，上传本例子的源码，大家可以从这里下载。

                                                                                                            2008年10月13日