實現登入註冊頁面跳轉
阿新 • • 發佈：2021-11-19
首頁：
程式啟動時，進入首頁，在首頁可以選擇的操作是：
1：註冊
2：登入
1、註冊：當容器中存在使用者輸入的使用者名稱時，或者使用者名稱的長度不再6-15之間時，註冊失敗
密碼需要輸入2次最終確定。如果兩次輸入的密碼不一致，或者密碼長度不在6-15之間時，註冊失敗
驗證碼，當用戶名和密碼都符合規範時，點擊發送驗證碼，顯示4位數的純數字驗證碼，如果驗證碼輸入錯的話，註冊失敗；
當註冊成功時，將使用者名稱和密碼新增到指定的容器中，
2、登入：只有當用戶名和密碼和驗證碼都正確的時候，才顯示登入成功
輸入使用者名稱和密碼判斷是否正確，同時驗證輸入的驗證碼是否正確，正確則顯示登入成功，失敗顯示登入失敗。
3、登入成功之後，在頁面顯示歡迎你：使用者名稱， 同時可以進行的操作如下
(1)可以選擇檢視所有使用者資訊，顯示所有的使用者名稱和密碼。++
(2)修改密碼，修改密碼前必須驗證原密碼，輸入正確可以進行修改，輸入錯誤則不能進行修改操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js">
</script>
</head>
<body>
<form action="登入.html">
賬戶：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js">
</script>
<style type="text/css">
#div{
display: none;
}
</style>
</head>
<body>
<div id="app">
賬戶：<input type="" name="" id="mrs" value="" /><br />
密碼：<input type="" name="" id="word" value="" /><br />
<input type="" id="postexe" />
<button onclick="denglu()">傳送驗證碼</button><br />
<button id="post">登入</button>
<button ><a href="註冊.html">註冊</a></button>
</div>
<div id="div">
歡迎你<span id="huan"></span>
<button id="select">檢視</button>
<span id="xinxi"></span>
<span id="xinxa"></span>
<input id="xiu"/>
<button id="gai">修改密碼</button>
</div>
<script type="text/javascript">
var xing=["zhangsan","wangwu"]
var ma=[123123,111111]
var flag1=false,flag2=false;
var t;
function denglu(){
var parm=location.search
console.log(parm)
parm=parm.substring(1)
//將擷取的資料通過&分割
var arr=parm.split("&")
//建立一個新的物件
var obj=new Object()
//對陣列在進行迴圈
for(var i=0;i<arr.length;i++){
//將陣列分割為0，1 name和資料
obj[arr[i].split("=")[0]]=arr[i].split("=")[1]
}
console.log(obj.name)
console.log(obj.password)
var Uname = new Array(xing.length+1)
var Upwd = new Array(ma.length+1)
//通過forin遍歷陣列將兩個陣列的資料賦值給心陣列
for(var x in xing){
Uname[x]=xing[x];
}
for(var y in ma){
Upwd[y]=ma[y];
}
//通過下表將讀取的資料存放到陣列最後一位
Uname[Uname.length-1]=(obj.name)
Upwd[Upwd.length-1]=(obj.password)
console.log(Uname)
console.log(Upwd)
var mr=document.getElementById("mrs").value
var wo=document.getElementById("word").value
var num=0;
for (var ds=0;ds<Uname.length;ds++) {
if(mr == Uname[ds]){
for(var yy=0;yy<Upwd.length;yy++){
if(wo == Upwd[yy]){
num++
}
}
}
}
if(num >0){
t="";
for(var i=0;i<4;i++){
t+=Math.floor(Math.random()*10)
}
console.log(t)
}
}
$("#post").click(function(){
var a=$("#postexe").val()
var b=$("#mrs").val()
if (a == t) {
alert("登入成功")
$("#app").hide()
$("#div").show()
$("#huan").html(b)
} else{
alert("登陸失敗")
}
})
$("#select").click(function(){
for(var x in xing){
$("#xinxi").html(xing[x])
}
for(var y in ma){
$("#xinxa").html(ma[y])
}
})
$("#gai").click(function(){
var a=parseInt(prompt("輸入原密碼"))
var b=$("#xiu").val()
var num=0;
for (var x in ma) {
if(ma[x] == a){
ma[x] = b;
}else{
num++
}
}
if(num > 1){
alert("原密碼輸入錯誤")
}
console.log(ma)
})
</script>
</body>
</html>