1. 程式人生 > >登陸——記住密碼

登陸——記住密碼

ear index red 失敗 -c css 註冊 https light

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <
meta name="author" content="Coderthemes"> <title>Zebra 基於邏輯塊的語音策略編輯平臺</title> <link rel="shortcut icon" href="../static/images/favicon/favicon.ico" type="image/x-icon"> <link href="../static/css/assetscore.css" rel="stylesheet" type="text/css" /> <
link href="../static/css/components.css" rel="stylesheet" type="text/css" /> <link href="../static/css/icons.css" rel="stylesheet" type="text/css" /> <link href="../static/css/pages.css" rel="stylesheet" type="text/css" /> <link href="../static/css/responsive.css" rel="stylesheet"
type="text/css" /> <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <script src="../static/js/assets/modernizr.min.js"></script> </head> <body onLoad="document.getElementById(‘username‘).focus();getCookie();"> <div class="account-pages"></div> <div class="clearfix"></div> <div class="wrapper-page"> <div class=" card-box"> <div class="panel-heading"> <h3 class="text-center"> 登陸 <strong class="text-custom">Zebra</strong> </h3> </div> <div class="panel-body"> <div class="col-xs-12" style="display: none;"> <h4 id="errorMessage" style="color: red"></h4> </div> <form class="form-horizontal m-t-20"> <div class="form-group "> <div class="col-xs-12"> <input class="form-control" type="text" id="username" placeholder="用戶名"> </div> </div> <div class="form-group"> <div class="col-xs-12"> <input class="form-control" type="password" id="password" placeholder="密碼"> </div> </div> <div class="form-group "> <div class="col-xs-12"> <div class="checkbox checkbox-primary"> <input id="checkbox-signup" type="checkbox"> <label for="checkbox-signup"> 記住密碼 </label> </div> </div> </div> <div class="form-group text-center m-t-40"> <div class="col-xs-12"> <button id="login_btn" class="btn btn-primary btn-block text-uppercase waves-effect waves-light" type="button">登陸</button> </div> </div> <div class="form-group m-t-30 m-b-0"> <div class="col-sm-12"> <!-- <a href="recoverpw.html" class="text-dark" disabled=‘false‘><i class="fa fa-lock m-r-5"></i> 忘記密碼?</a> --> </div> </div> </form> </div> </div> <div class="row"> <div class="col-sm-12 text-center"> <!-- <p>還沒有賬號? <a href="register.html" class="text-primary m-l-5" disabled=‘false‘><b>註冊</b></a></p> --> </div> </div> </div> <script> var resizefunc = []; </script> <!-- jQuery --> <script src="../static/js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).keyup(function(event){ if(event.keyCode == 13){ //觸發login_btn綁定的submit事件 $("#login_btn").trigger("click"); } }); //點擊登陸按鈕 $("#login_btn").click(doLogin); }) function doLogin(){ var username = $("#username").val().toLowerCase(); var password = $("#password").val().toLowerCase(); var errorflag; // alert(username+","+password); if(username == ‘‘){ $("#errorMessage").parent().css("display","block"); $("#errorMessage").text("請輸入用戶名!!"); return false; }else if(password == ""){ $("#errorMessage").parent().css("display","block"); $("#errorMessage").text("請輸入密碼!!"); return false; } //ajax去服務器端校驗 $.ajax({ async:true,//是否異步 type:POST, data:{"username":username,"password":password}, dataType:json,//數據傳輸格式:json url:/login/,//請求的action路徑 error:function(){ //請求失敗處理函數 // alert(‘請求失敗!‘); window.location.href = "{{ url_for(‘.error‘)}}"; }, success:function(data){ // console.log(data) if(data==fail){ $("#errorMessage").parent().css("display","block"); $("#errorMessage").text("用戶名或密碼錯誤"); } else{ window.location.href = "{{ url_for(‘.home‘)}}"; sessionStorage.strategyNameItem = data; if ($("#checkbox-signup").is(":checked")) { var signInfo = "username="+username+"%%"+password; setCookie(signInfo,7); } } } }); } function setCookie(signInfo,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = signInfo+ ";" + expires; } function getCookie(){ var nmpsd; var nm; var psd; var cookieString = new String(document.cookie); var cookieHeader = "username="; var beginPosition = cookieString.indexOf(cookieHeader); cookieString = cookieString.substring(beginPosition); var ends = cookieString.indexOf(";"); if (ends != -1) { cookieString = cookieString.substring(0, ends); } if (beginPosition > -1) { nmpsd = cookieString.substring(cookieHeader.length); if (nmpsd != "") { beginPosition = nmpsd.indexOf("%%"); nm = nmpsd.substring(0, beginPosition); psd = nmpsd.substring(beginPosition + 2); document.getElementById(username).value = nm; document.getElementById(password).value = psd; if (nm != "" && psd != "") { // document.forms[0].checkbox.checked = true; document.getElementById(checkbox-signup).checked = true; } } } } </script> </body> </html>

技術分享圖片

登陸——記住密碼