這幾天有代碼任務，自己做了個登入介面，感覺不錯，拿來共用一下~~
<link rel="stylesheet" href="/ext-3.2.1/resources/css/ext-all.css"type="text/css"></link><script type="text/javascript" src="/ext-3.2.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="/ext-3.2.1/ext-all.js"></script></head><body><script language="javascript">var uname = new Ext.form.TextField( {id :'uname',fieldLabel : '使用者名稱',name : 'name',//元素名稱//anchor:'95%',//也可用此定義自適應寬度allowBlank : false,//不允許為空白value : "admin",blankText : '使用者名稱不可為空'//錯誤提示內容});var pwd = new Ext.form.TextField( {id : 'pwd',//xtype: 'textfield',inputType : 'password',fieldLabel : '密 碼',//anchor:'95%',maxLength : 10,name : 'password',allowBlank : false,value : "12345",blankText : '密碼不可為空'});Ext.onReady(function() {//使用表單提示Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//定義表單var simple = new Ext.FormPanel( {labelWidth : 75,defaults : {width : 150},defaultType : 'textfield',//預設欄位類型bodyStyle : 'background: #cdcdcd;padding:30 0 0 20;',border : false,buttonAlign : 'center',border : false,id : "form",//定義表單元素items : [ uname, pwd ],buttons : [ {text : '登入',type : 'submit',id : 'sb',//定義表單提交事件handler : save}, {text : '重設',handler : function() {simple.form.reset();}} ],keys : [ {key : Ext.EventObject.ENTER,fn : save,scope : this} ]});function save() {var userName = uname.getValue();var userPass = pwd.getValue();//驗證合法後使用載入進度條if (simple.form.isValid()) {//提交到伺服器操作simple.form.submit({waitMsg : '進行中登陸驗證,請稍後...',url : 'login!checkUser.action',method : 'post',params : {userName : userName,userPass : userPass},//提交成功的回呼函數success : function(form, action) {if (action.result.msg == 'OK') {window.location.href="login!index.action?userName="+userName;}else if(action.result.msg == 'ERROR') {window.location.href="index.jsp";}},//提交失敗的回呼函數failure : function(form, action) {switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.Msg.alert('錯誤提示', '表單資料非法請核實後重新輸入！'); break; case Ext.form.Action.CONNECT_FAILURE: Ext.Msg.alert('錯誤提示', '網路連接異常！'); break; case Ext.form.Action.SERVER_INVALID: Ext.Msg.alert('錯誤提示', "您的輸入使用者資訊有誤，請核實後重新輸入！"); simple.form.reset(); }}});}};//定義表單var win = new Ext.Window({id : 'win',layout : 'fit', //調適型配置 align : 'center',width : 330,height : 182,resizable : false,draggable : false,border : false,bodyStyle : 'padding:5px;background:gray',maximizable : false,//禁止最大化closeAction : 'close',closable : false,//禁止關閉,items : simple//將表單作為表單元素嵌套布局});win.show();//顯示表單pwd.focus(false, 100);});</script></body>
效果：
這裡是在SSH架構上做的。而且實現了struts2登入跳轉。
關於登入跳轉，很多人都說難做，也確實有點難做。因為submit提交後success裡得到的是個字串，並不會完成頁面跳轉的動作！要想跳轉，得自己在success裡寫跳轉的代碼。上面我用的方式是一種，有一點不好的是：通過window.location.href方式跳轉到首頁面，瀏覽器的URL裡顯示傳遞的參數！
我知道，還有一種瞞天過海之術，可以不會把參數顯示在url裡。就是在做一個div，設定這個div為不可見。這個div裡放置一個form，給這個form配置method=post。然後將window.location.href="login!index.action?userName="+userName;替換成:那個form.action=login!index.action;form.submit會實現成功跳轉。但這種辦法最好不要用！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
