每在表单输入一次内容，登陆成功提示就会弹出来一次，连着弹好几次登陆成功是怎么回事？

<!DOCTYPE html>

<html>

<head>

<title>慕淘网作业</title>

</head>

<body>

<a href="#" class="r10">手机逛慕淘</a>

</div>

<ul>

<li><a href="#">消费者客服</a></li>

</ul>

</div>

<ul>

<li><a href="#">已卖出的宝贝</a></li>

<li><a href="#">出售中的宝贝</a></li>

<li><a href="#">卖家服务市场</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#">收藏的宝贝</a></li>

<li><a href="#">收藏的店铺</a></li>

</ul>

</div>

<ul>

<li><a href="#">已买到的宝贝</a></li>

</ul>

</div>

</div>

</div>

</div>

<input type="checkbox" name="button" checked> <span>下次自动登录</span>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

/*ALL Tag*/

margin: 0;

padding: 0;

font-size: 14px;

font-family: "微软雅黑";

color: #333;

}

text-decoration: none;

}

li{

list-style: none;

display: none;

}

/*main*/

.main{

position: relative;

width: 100%;

height: auto;

}

/*顶部*/

.bgcolor{

position: absolute;

top: 0;

left: 0;

background-color: #f3f5f7;

width: 100%;

height: 141px;

}

.top{

position: absolute;

width: 1200px;

left: 50%;

margin-left: -600px;

height: 40px;

line-height: 40px;

border-bottom: 1px solid gray;

z-index: 99;

}

/*顶部左侧导航*/

.left{

display: inline;

}

.l1{

color: red;

}

.r10{

margin-left: 10px;

}

/*弹出层遮罩层*/

.Layer-mask{

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #000;

opacity: 0.5;

z-index: 99;

}

/*弹出层窗体*/

.Layer-pop{

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 400px;

height: 320px;

background-color: #fff;

z-index: 100;

}

/*弹出层关闭按钮*/

.Layer-close{

float: right;

width: 36px;

height: 36px;

font-size: 22px;

text-align: center;

line-height: 36px;

color: #cdd0d4;

margin-top: 18px;

margin-right: 40px;

cursor: pointer;

}

.Layer-close:hover{

color: gray;

}

/*弹出层内容区域*/

.Layer-content{

padding: 20px;

}

.con a{

margin-left: 27px;

font-size: 20px;

}

.con-active{

color:red;

border-bottom: 2px solid red;

}

.input{

margin-top: 20px;

text-align: center;

}

.input input{

width: 300px;

height: 30px;

}

.input input.input-left{

width: 230px;

height: 30px;

float: left;

margin-left: 28px;

}

.input img{

height: 32px;

float: right;

margin-right: 30px;

margin-top: 1px;

}

.clear{

clear:both;

}

.button{

margin-left: 27px;

margin-top: 20px;

}

.button-right{

float: right;

margin-right: 29px;

}

.Submit{

margin-top: 15px;

text-align: center;

}

.submit{

width: 302px;

height: 37px;

line-height: 37px;

background-color: red;

color: #fff;

font-size: 16px;

border-radius: 3px;

}

.img-bottom{

text-align: center;

margin-top: 15px;

}

.img-bottom img{

background-color: #cdd0d4;

border-radius: 50%;

margin-right: 15px;

}

.img-bottom img:hover{

background-color: #07bbbf;

}

.error{

color: #e40;

}

/*顶部右侧导航*/

.select,

.select-box{

float: right;

}

.select-box{

margin-right: 10px;

text-align: center;

width: 90px;

}

.select-box:hover ul{

background: #fff;

}

.select-box:hover li{

display: block;

}

.top .left a:hover{

color: red;

}

.select .select-box span:hover{

color: red;

}

.select .select-box a:hover{

color: #cdd0d4;

}

.select-box ul img{

position: relative;

top: 3px;

left: -2px;

}

/*logo区域*/

.logo{

position: absolute;

left: 50%;

margin-left: -600px;

width: 1200px;

height: 100px;

line-height: 100px;

margin-top: 41px;

}

.logo .img1{

margin-left: 10px;

float: left;

margin-top: 26px;

}

.logo input{

width: 550px;

height: 34px;

margin-left: 180px;

}

.span-search a{

background-color: #333;

color: #fff;

font-size: 16px;

padding: 6px 22px;

}

.logo-right{

float: right;

width: 160px;

height: 34px;

margin-top: 33px;

margin-right: 20px;

background-color: red;

}

.img2{

float: left;

margin: 9px 10px 0 10px;

}

.img3{

float: right;

margin: 8px 10px 0 0;

}

.logo-right span{

font-size: 14px;

color: #fff;

float: left;

line-height: 34px;

margin: 0 6px;

}

//主函数

$(function(){

//登陆链接事件

$('.landing').click(function(){

Land();

// $('.form1').get(0).reset();

});

$('.Login').click(function(){

Land();

});

//注册链接事件

$('.Rege').click(function(){

Regecon();

});

$('.rege-top').click(function(){

Regecon();

});

//登陆链接事件函数

function Land(){

showLayer(400,320,closeBack);

$('.regeHtml').hide();

$('.loginHtml').show();

//表单检验

$('.Submit').click(function(){

var text = $("input[name = 'text']").val();

var password = $("input[name = 'password']").val();

if (text === '895103' && password === '895103') {

$('#form1').attr('target','rfFrame');

alert('登陆成功');

}else{

$('.error').html('账号或密码输入错误');

$('#form1').attr('target','rfFrame');

};

});

};

//注册链接事件函数

function Regecon(){

showLayer(400,280,closeBack);

$('.loginHtml').hide();

$('.regeHtml').show();

//表单检验

$('.Submit').click(function(){

var text = $("input[name = 'text2']").val();

if (text === 'gyyd') {

$('#form1').attr('target','rfFrame');

alert('注册成功');

}else{

$('.error').html('验证码输入错误');

$('#form2').attr('target','rfFrame');

};

});

};

//弹出层关闭回调函数

function closeBack(){

$('.error').html('');

$('form').get(0).reset();

// $("input[name = 'text']").val('');

// $("input[name = 'password']").val('');

// $("input[name = 'text']").val('');

// $("input[name = 'text2']").val('');

}

//显示弹出层

function showLayer(width,height){

//显示遮罩层

$('.Layer-mask').show();

//显示弹出层窗体

$('.Layer-pop').show();

//设置弹出层窗体样式

$('.Layer-pop').css({

'width' : width,

'height' : height

});

//点击关闭按钮关闭

$('.Layer-close').click(function(){

hideLayer();

closeBack();

});

};

//隐藏弹出层

function hideLayer(){

$('.Layer-mask').hide();

$('.Layer-pop').hide();

};

本来只是想输入内容错误的时候表单不会立刻提交，还继续停留在表单界面，所以加了 iframe,但是现在是不会立刻刷新了，也停留在了表单界面，但是输入框内容不会清空了，而且不管输入对或者错，每输入一次，最后输入正确账号密码的时候，登陆成功提示就会多弹出来几次，比如我先输错了3次，第四次输对了，就会弹出来四个登陆成功。。

李二狗狗狗 2018-06-20

源自：项目：JQ实现瀑布流 5-2 作业题