<h6>以前很少用到 form 表單的一些屬性用它也只是關(guān)心樣式如何，最近的項(xiàng)目中需要傳值的，覺得 form 比 Ajax 方便一點(diǎn)就用的 form ，熟悉了之后才發(fā)現(xiàn)，
form 還是很的強(qiáng)大</h6>
<form class="form-horizontal" role="form" method="POST" action="Login">
<div class="form-group ">
<div class="col-sm-4">
<input type="text" class="form-control" id="phoneNumber"
onBlur="checkPhone()">
</div>
<label id="loginNamewarn">
<span class="warn">
</span>
</label>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control" id="loginPassword"
onBlur="checkPassword()">
</div>
<label id="loginPasswarn">
<span class="warn">
</span>
</label>
</div>
<button type="submit" class="loginSure">登錄</button>
</form>
這是我項(xiàng)目中登錄的代碼，在填寫了手機(jī)號(hào)失焦之后會(huì)觸發(fā) checkPhone 判斷填寫是否正確，如果不對(duì)就在后面提示。
<h5>頁面顯示</h5>
login.png
<h5>判斷后顯示</h5>
error.png
那么問題來了，今天打開發(fā)現(xiàn)填寫的信息錯(cuò)誤時(shí)，頁面雖然會(huì)提示錯(cuò)誤但是如果點(diǎn)擊登錄還是會(huì)把數(shù)據(jù)返回到后臺(tái)，而這不是我想要的效果，查了一些問文檔，然后找到了解決方法，其實(shí)只需要在提交那里添加一個(gè)判斷即可。下面是我寫的一個(gè)小栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交">
</form>
</body>
</html>
運(yùn)行時(shí)，網(wǎng)頁上的URL顯示：
1.png
點(diǎn)擊按鈕后頁面URL：
1.png
可以發(fā)現(xiàn)點(diǎn)擊提交，頁面發(fā)生了跳轉(zhuǎn)，但是如果加上判斷：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交" onclick="return check()">
</form>
<script>
function check() {
return false;
}
</script>
</body>
</html>
可以發(fā)現(xiàn)，不管怎么點(diǎn)擊它的URL都是不會(huì)發(fā)生變化的：
1.png
