基於WebForm+EasyUI的業務管理系統形成之旅 -- 登錄窗口(Ⅱ)

上篇《基於WebForm+EasyUI的業務管理系統形成之旅 -- 系統設置》，主要是介紹系統瀏覽器在線下載安裝，這些前期准備是非常重要的.

最近忙於將工程管理系統中各個模塊，用業務流程方式串接起來，可能更新博客不是那么快，希望大家多多體諒。 

一、登錄窗口

---

登錄界面，如下圖所示。

基於瀏覽器Cookies,保留用戶名的登錄時效。

<script src="/Js/jquery.cookie.js" type="text/javascript"></script>

界面代碼如下所示。

var h = '<table id="loginForm" cellpadding=2 style="width:100%">';  2 h += '<tr><td rowspan="4" align="center"><img src="/Images/bgT.png" alt="" style="overflow: hidden;"/></td>';  3 h += '<td style="text-align: right;">用 戶 名：</td>';  4 h += '<td><input id="txtLoginName" type="text" class="easyui-validatebox easyui-textbox" maxlength="20" style="width: 150px;" /></td></tr>';  5 h += '<tr><td style="text-align: right;">密 碼：</td>';  6 h += '<td><input id="txtPassword" type="password" class="easyui-validatebox easyui-textbox" maxlength="20" style="width: 150px;" /></td></tr>';  7 h += '<tr><td style="text-align: right;">登錄時效：</td><td><select id="expires" class="easyui-combobox" style="width: 155px;">';  8 h += '<option value="">不保存</option><option value="1" selected="selected">一天</option>';  9 h += '<option value="7">一周</option>'; 10 h += '<option value="15">半個月</option>'; 11 h += '<option value="30">一個月</option>'; 12 h += '</select></td></tr>'; 13 h += '<tr><td style="text-align: right;">驗 證 碼：</td>'; 14 h += '<td><input id="txtVerifyCode" type="text" class="easyui-validatebox easyui-textbox" maxlength="4" style="width: 150px;" />'; 15 h += '&nbsp;<img src="/Handler/VerifyCode.ashx" id="Verify_codeImag" width="70" height="22" alt="點擊切換驗證碼" title="點擊切換驗證碼" ' +
     'style="margin-top: 0px; vertical-align: top; cursor: pointer; "'; 17 h += "onclick =\"ToggleCode(this.id, '/Handler/VerifyCode.ashx');return false;\""; 18 h += '</td></tr></table>'; 19 function ShowLoginWindow() { 20     $('#w').hWindow({ 21         html: '<div class="login_top">' + h + '</div>', 22         width: 485, 23         height: 310, 24         title: '&nbsp;登錄窗口', 25  submit: function () { 26  Login(); 27  } 28  }); 29 }

JS代碼初始化，如下所示。

 1 $(function () {  2  ShowLoginWindow();  3 if ($.cookie("UserAccount") != null) {  4 $("#txtLoginName").val($.cookie("UserAccount"));  5 $("#txtPassword").focus();  6  }  7 else {  8 $("#txtLoginName").focus();  9  } 10 if (screen.height < 1000) { 11 $("#spanScreen").html("最佳瀏覽環境：IE8.0～10.0或基於IE內核的瀏覽器,當前顯示器分辨率為" + screen.width + "*" + screen.height); 12  } 13 //響應鍵盤的回車事件 14 $(this).keydown(function (e) { 15 if (!e) e = window.event; //火狐中是 window.event 16 if ((e.keyCode || e.which) == 13) { 17 e.returnValue = false; 18 e.cancel = true; 19  Login(); 20  } 21  }); 22 });

 Login方法代碼，如下所示。

//系統登錄
function Login() {  3     var UserName = $("#txtLoginName");  4     var Password = $("#txtPassword");  5     var VerifyCode = $('#txtVerifyCode');  6     var saveCookieDays = $('#expires').val();  7     if (UserName.val() == "") {  8         alter('請輸入登錄名!');  9  UserName.focus(); 10         return false; 11  } 12     else if (Password.val() == "") { 13         alter('請輸入密碼!'); 14  Password.focus(); 15         return false; 16  } 17     else if (VerifyCode.val() == "") { 18         alter('請輸入驗證碼!'); 19  VerifyCode.focus(); 20         return false; 21  } 22     else { 23         var parm = 'action=login&user_Account=' + escape(UserName.val()) + '&userPwd=' + escape(Password.val()) 24                  + '&expires=' + escape(saveCookieDays) + '&code=' + escape(VerifyCode.val()); 25         getAjax('/Handler/Login.ashx', parm, function (rs) { 26             if (parseInt(rs) == 1) { 27  VerifyCode.focus(); 28                 alter('驗證碼輸入不正確!'); 29                 ToggleCode("Verify_codeImag", '/Handler/VerifyCode.ashx'); 30                 return false; 31             } else if (parseInt(rs) == 2) { 32  UserName.focus(); 33                 alter('賬戶被鎖,請聯系管理員!'); 34                 return false; 35             } else if (parseInt(rs) == 4) { 36  UserName.focus(); 37                 alter('賬戶或密碼有錯誤!'); 38                 return false; 39             } else if (parseInt(rs) == 7) { 40  UserName.focus(); 41                 alter('該人員信息暫未審核,請聯系管理員!'); 42                 return false; 43  } 44             else if (parseInt(rs) == 6) { 45  UserName.focus(); 46                 alter('該用戶已經登錄!'); 47                 return false; 48             } else if (parseInt(rs) == 3) { 49                 setInterval(Load, 1000); 50             } else { 51                 alter('服務器連接不上,請聯系管理員!'); 52                 window.location.href = window.location.href.replace('#', ''); 53                 return false; 54  } 55             return true; 56  }); 57  } 58 }

利用EasyUI創建Web登錄界面，一樣可以做的很不錯的。