在做登录的时候,需要ajax提交验证,但是发现点击button会自动submit表单,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #3C8DBC;
}
form {
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
position: absolute;
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
-borderWidth: 2px;
border-radius: var(- -borderWidth);
}
h1 {
color: #FFF;
font-weight: bold;
text-shadow: 2px 2px 5px #002478;
}
.loginInput {
width: 173px;
height: 24px;
}
.loginBtn {
height: 30px;
color: white;
font-size: 16px;
background-color: #3C8DBC;
border-color: #3C8DBC;
border-radius: 4px;
}
.loginBtn:hover {
background-color: #1360a7;
border-color: #1360a7;
}
</style>
</head>
<body>
<form action="login.do">
<h1>系统登陆</h1>
<hr>
<input type="text" class="loginInput" placeholder="登录帐号"><br> <input
type="password" class="loginInput" placeholder="登录密码"><br>
<button class="loginInput loginBtn">按钮点击</button>
</form>
</body>
</html>
点击提交后,会提交到form指定的action
原来是button在form里面会submit事件,最后只能改成input,然后将类型设置为submit,然后写js方法返回false即可不自动提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #3C8DBC;
}
form {
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
position: absolute;
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
-borderWidth: 2px;
border-radius: var(- -borderWidth);
}
h1 {
color: #FFF;
font-weight: bold;
text-shadow: 2px 2px 5px #002478;
}
.loginInput {
width: 173px;
height: 24px;
}
.loginBtn {
height: 30px;
color: white;
font-size: 16px;
background-color: #3C8DBC;
border-color: #3C8DBC;
border-radius: 4px;
}
.loginBtn:hover {
background-color: #1360a7;
border-color: #1360a7;
}
</style>
</head>
<body>
<form action="login.do" onsubmit="return login();">
<h1>系统登陆</h1>
<hr>
<input type="text" class="loginInput" placeholder="登录帐号"><br>
<input type="password" class="loginInput" placeholder="登录密码"><br>
<input type="submit" class="loginInput loginBtn" value="登录"><br>
</form>
<script type="text/javascript">
function login() {
// 此处写 ajax 请求后台代码
alert('登录成功');
return false;
}
</script>
</body>
</html>