这篇博客探讨了一个简单的HTML登录注册页面的实现，包括账号和密码输入，以及使用JavaScript进行验证。当用户点击登录按钮时，程序会检查账号密码是否匹配，如果匹配则显示成功提示，不匹配则显示失败。然而，博主遇到了一个问题，即当登录失败时，程序会连续弹出多个失败提示。博主寻求解决方案来正确地显示一次失败信息并避免多余的弹窗。
大佬们，就是我这里上传到本地了，读取也正常，但是账号密码填写成功弹出成功，
但是失败的话怎么正常弹出失败呢，else{alert（”失败“）}这么写不对，问题就是他会返回前面输出的数据依次弹出失败失败成功用break终止也不行，求助求助大佬们
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#zc{
width: 300px;
height: 400px;
border: 1px solid gray;
text-align: center;
}
#zc>h1{
margin: 50px;
}
#zc>p{
margin-top: 40px;
}
button{
width: 120px;
height: 35px;
margin-top: 50px;
}
#dl{
width: 300px;
height: 400px;
border: 1px solid gray;
text-align: center;
}
#dl>h1{
margin: 50px;
}
#dl>p{
margin-top: 40px;
}
div{
margin-left: 150px;
float: left;
}
</style>
</head>
<body>
<div id="zc">
<h1>注册</h1>
<p>账号：<input type="text" id="zc_zh"></p>
<p>密码：<input type="password" id="zc_mm"></p>
<button id="btn_zc">注册</button>
</div>
<div id="dl">
<h1>登录</h1>
<p>账号：<input type="text" id="dl_zh"></p>
<p>密码：<input type="password" id="dl_mm"></p>
<button id="btn_dl">登录</button>
</div>
<script>
var btn_zc = document.getElementById("btn_zc");
var btn_dl = document.getElementById("btn_dl");
var zc_zh = document.getElementById("zc_zh");
var zc_mm = document.getElementById("zc_mm");
var dl_zh = document.getElementById("dl_zh");
var dl_mm = document.getElementById("dl_mm");
var arr = [];
btn_zc.onclick = function(){
arr.push(zc_zh.value,zc_mm.value);
var date = new Date();
date.setDate(date.getDate()+7);
document.cookie = "name="+encodeURIComponent(arr)+";expires="+date;
}
btn_dl.onclick = function(){
// console.log(decodeURIComponent(document.cookie));
// wode 123 nide 456 tade 789
var index = decodeURIComponent(document.cookie).split("=");
console.log(index[1]);
var index1 = index[1].split(",");
console.log(index1);
// 循环遍历
for(var i=0;i<index1.length;i++){
if(i%2==0 ){
if(index1[i]==dl_zh.value&&index1[i+1]==dl_mm.value){
alert("成功");
break;
}else{
alert("失败")
break;
}
}
}
}
</script>
</body>
</html>
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
