bootstrap4登入註冊頁面

佬zz發表於2024-07-20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>login</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
<div class="container d-flex align-items-center">
<div class="form-holder has-shadow">
<div class="row">
<!-- Logo & Information Panel-->
<div class="col-lg-6">
<div class="info d-flex align-items-center">
<div class="content">
<div class="logo">
<h1>歡迎登入</h1>
</div>
<p>XXXX管理系統</p>
</div>
</div>
</div>
<!-- Form Panel -->
<div class="col-lg-6 bg-white">
<div class="form d-flex align-items-center">
<div class="content">
<form method="post" action="login.html" class="form-validate" id="loginFrom">
<div class="form-group">
<input id="login-username" type="text" name="userName" required
data-msg="請輸入使用者名稱" placeholder="使用者名稱" value="admin"
class="input-material">
</div>
<div class="form-group">
<input id="login-password" type="password" name="passWord" required
data-msg="請輸入密碼" placeholder="密碼" class="input-material">
</div>
<button id="login" type="submit" class="btn btn-primary">登入</button>
<div style="margin-top: -40px;">
<!-- <input type="checkbox" id="check1"/>&nbsp;<span>記住密碼</span>
<input type="checkbox" id="check2"/>&nbsp;<span>自動登入</span> -->
<div class="custom-control custom-checkbox " style="float: right;">
<input type="checkbox" class="custom-control-input" id="check2">
<label class="custom-control-label" for="check2">自動登入</label>
</div>
<div class="custom-control custom-checkbox " style="float: right;">
<input type="checkbox" class="custom-control-input" id="check1">
<label class="custom-control-label" for="check1">記住密碼&nbsp;&nbsp;</label>
</div>
</div>
</form>
<br/>
<small>沒有賬號?</small><a href="register.html" class="signup">&nbsp;註冊</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript files-->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script><!--表單驗證-->
<!-- Main File-->
<script src="js/front.js"></script>
<script>
$(function () {
/*判斷上次是否勾選記住密碼和自動登入*/
var check1s = localStorage.getItem("check1");
var check2s = localStorage.getItem("check2");
var oldName = localStorage.getItem("userName");
var oldPass = localStorage.getItem("passWord");
if (check1s == "true") {
$("#login-username").val(oldName);
$("#login-password").val(oldPass);
$("#check1").prop('checked', true);
} else {
$("#login-username").val('');
$("#login-password").val('');
$("#check1").prop('checked', false);
}
if (check2s == "true") {
$("#check2").prop('checked', true);
$("#loginFrom").submit();
//location="https://www.baidu.com?userName="+oldName+"&passWord="+oldPass;//新增退出當前賬號功能
} else {
$("#check2").prop('checked', false);
}
/*拿到剛剛註冊的賬號*/
/*if(localStorage.getItem("name")!=null){
$("#login-username").val(localStorage.getItem("name"));
}*/
/*登入*/
$("#login").click(function () {
var userName = $("#login-username").val();
var passWord = $("#login-password").val();
/*獲取當前輸入的賬號密碼*/
localStorage.setItem("userName", userName)
localStorage.setItem("passWord", passWord)
/*獲取記住密碼 自動登入的 checkbox的值*/
var check1 = $("#check1").prop('checked');
var check2 = $('#check2').prop('checked');
localStorage.setItem("check1", check1);
localStorage.setItem("check2", check2);
})

/*$("#check2").click(function(){
var flag=$('#check2').prop('checked');
if(flag){
var userName=$("#login-username").val();
var passWord=$("#login-password").val();
$.ajax({
type:"post",
url:"http://localhost:8080/powers/pow/regUsers",
data:{"userName":userName,"passWord":passWord},
async:true,
success:function(res){
alert(res);
}
});
}
})*/
})
</script>
</body>
</html>

相關文章