上代碼
前端+js（懶得分文件了）
@{ ViewBag.Title = "MVC權限系統架構學習-登錄"; Layout = "/Views/Shared/_LoadJsAndCss.cshtml"; } <link rel="stylesheet" href="~/Content/styles/css/login.css"> <script type="text/javascript"> var contentPath = '@Url.Content("~")'.substr(0, '@Url.Content("~")'.length - 1); var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; if (isIE6) { window.location.href = contentPath + "/Error/ErrorMessage?message='瀏覽器不支持'"; } //回車鍵 document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { var btlogin = document.getElementById("btnlogin"); btnlogin.click(); } } //初始化 $(function () { function loadTopWindow() { if (window.top != null && window.top.document.URL != document.URL) { window.top.location = document.URL; //這樣就可以讓登陸窗口顯示在整個窗口了 } } $("#bodytop").load(loadTopWindow()); //提示信息 function formMessage(msg, type) { $('.login_tips').parents('dt').remove(); var _class = "login_tips"; if (type == 1) { _class = "login_tips-succeed"; } $('.spanMess').prepend('<dt><div class="' + _class + '"><i style="color:red" class="fa fa-question-circle"></i>' + msg + '</div></dt>'); } //點擊切換驗證碼 $("#login_verifycode").click(function () { $("#code").val(''); $("#login_verifycode").attr("src", contentPath + "/Login/VerifyCode?time=" + Math.random()); }); //登錄按鈕事件 $("#btnlogin").click(function () { var $username = $("#name"); var $password = $("#password"); var $verifycode = $("#code"); if ($username.val() == "") { $username.focus(); formMessage('請輸入賬號。'); return false; } else if ($password.val() == "") { $password.focus(); formMessage('請輸入密碼。'); return false; } else if ($verifycode.val() == "") { $verifycode.focus(); formMessage('請輸入驗證碼。'); return false; } else { CheckLogin(); } }); function CheckLogin() { $(".formmargin").find('span').hide(); var name = $.trim($("#name").val()); var pass = $.trim($("#password").val()); var code = $.trim($("#code").val()); $.ajax({ type: 'POST', url: '@Url.Action("LoginMvc", "Login")', data: { username: name, password: pass, VerificationCode: code }, dataType: 'JSON', success: function (data) { if (data.type == 1) { window.location.href = '@Url.Action("Index", "Home")'; } else { formMessage(data.message); $(".formmargin").find('span').show(); $("#login_verifycode").trigger("click"); } } }); } }) </script> <body id="bodytop"> <div class=" bg"></div> <div class="container"> <div class="container-content"> <form class="form-panel" method="post"> <div class="logibbox"> <div class="form-head formmargin"> <h1>后台管理中心</h1> </div> <div class="form-content formmargin"> <div class="field"> <input type="text" minlength="2" class="input input-big" id="name" name="name" placeholder="登錄賬號" data-validate="required:請填寫賬號" /> </div> <div class="field"> <input type="password" maxlength="16" class="input input-big" id="password" name="password" placeholder="登錄密碼" data-validate="required:請填寫密碼" /> </div> <div class="field clearfix"> <input type="text" maxlength="4" class="inputs input-big" id="code" name="code" placeholder="填寫右側的驗證碼" data-validate="required:請填寫右側的驗證碼" /> <img id="login_verifycode" class="login_verifycode" src="~/Login/VerifyCode" alt="點擊切換驗證碼" title="點擊切換驗證碼"/> </div> </div> <div class="form-tail formmargin"> <input type="button" class="button input-big" id="btnlogin" value="登錄"> <span class="spanMess"></span> </div> </div> </form> </div> </div> <div class="copyright"> MVC權限架構系統學習 <br> 版權：世人皆萌 </div> </body>
css文件
*{ margin: 0; padding: 0; font: inherit; color: #333; vertical-align: baseline; } *:before,*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .clearfix:after, .container:after{ content: " "; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; } .bg{ width: 100%; height: 100%; position: absolute; background: url(../images/bg.jpg); } .container-content{ margin: 150px auto; width: 400px; position: relative; } .form-panel{ border: 1px solid #ddd; border-radius: 4px; display: block; } .logibbox{ margin-top: -20px; border: 0; background: url(../images/tmbg-white.png); /*background-color:#fafafa;*/ } .logibbox .formmargin{ margin: 0 40px; } .form-panel .form-head{ margin: 20px; padding-top: 20px; display: block; text-align: center; /*font-weight: bold;*/ font-size: 24px; } .form-content{ display: block; height: 230px; } .form-content .field{ height: 33.33%; font-size: 14px; font: inherit; vertical-align: baseline; } .form-content .field .input{ display: inline-block; width: 318px;/*294px 318px*/ line-height: 1; } .form-content .field .inputs{ display: inline-block; width: 218px;/*196px 218px*/ line-height: 1; } .form-content .field .login_verifycode{ float: right; margin-top: 1px; display:inline-block; text-align:center; cursor:pointer; width: 100px; height: 36px; padding-right: 0; padding-left: 0; /*border: 1px solid #d5d5d5;*/ font-size: 14px; color: #727272; background: white; margin-left:-4px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .form-content .input-big, .form-tail .button{ padding:10px; font-size:16px; line-height: 24px; border-radius:10px; border:1px solid #d5d5d5; box-sizing:border-box; box-shadow:inset 0 1px 2px rgba(0,0,0,.1); outline:none; } .form-content .input-big, .form-tail .button:focus{ border:1px solid #afc2ec; color:#4b4b4b } .form-content .input-big, .form-tail .button[disabled]{ border:1px solid #d5d5d5; background:#fbfbfb; color:#9f9f9f; /*cursor:not-allowed*/ } .form-tail{ display: block; height: 106px; line-height: 106px; } .form-tail .button{ display: block; width: 100%; margin-top: 0px; border: solid 1px #ddd; border-color: #0ae; border-radius: 4px; color: #fff; background-color: #0ae; cursor: pointer; } .validation-summary-errors li{ height:43px; line-height:43px; width:auto; color:red; text-align:center; display:block; } .copyright{text-align: center;color: #4b4b4b;position: absolute;top: 100%;margin-top: -60px;width: 97%;font-family: Microsoft Yahei;line-height:25px;} .logibbox .formmargin .login_tips { height: 44px; line-height: 44px; font-size: 14px; text-align:center; color:red; box-shadow: none; }
兩張背景圖
后台代碼
/// <summary> /// 登錄 /// </summary> [HttpPost] public ActionResult LoginMvc(op_users login) { string Verification = WebHelper.GetSession("session_verifycode"); if (Session["session_verifycode"].IsEmpty() || Verification != MD5PassWordProvider.CutMD5(login.VerificationCode.ToLower(), 16)) { login.ErrorMessage = "您輸入的驗證碼不正確。"; return Content(new AjaxResult { type = ResultType.info, message = "您輸入的驗證碼不正確" }.ToJson()); //return View(login); } if (login.password.Length > 16) { login.ErrorMessage = "您輸入的密碼不正確。"; return Content(new AjaxResult { type = ResultType.info, message = "您輸入的密碼不正確" }.ToJson()); } var user = _userbll.Login(login.username, login.password); if (user == null) { login.ErrorMessage = "您輸入的用戶名不存在或密碼不正確。"; return Content(new AjaxResult { type = ResultType.info, message = "您輸入的用戶名不存在或密碼不正確" }.ToJson()); } if (user.IsExpire) { login.ErrorMessage = "該用戶已經禁用。"; return Content(new AjaxResult { type = ResultType.info, message = "該用戶已經禁用" }.ToJson()); } WebHelper.WriteSession("session_FullName", user.FullName); WebHelper.WriteSession("session_UserId", user.id); return Content(new AjaxResult { type = ResultType.success, message = "登陸成功" }.ToJson()); }
整個登陸就OK