jquery、js阻止表單提交的不同方法
做web開發的，寫表單提交的程式碼那是家常便飯。既然是要提交表單，那肯定就會進行表單驗證。表單驗證的問題一直都是一件頭疼的事情，爭議也比較大。有些程式設計師會把驗證放在伺服器端，讓伺服器來進行驗證，試想，這樣把資料傳來傳去，效率有多低啊！！如果表單裡的資料量過大，則會嚴重佔用伺服器頻寬。何況現在是WEB2.0的時代了，隨著Google、網易等使用Ajax技術的興起，把表單驗證放在伺服器端，實在是太落後了。
現在，我們就來看看，如何把表單驗證放在瀏覽器客戶端，把驗證工作交給瀏覽器來做，這必定要用到JavaScript。那麼就瞧瞧下面兩種驗證方法，一種是純JavaScript驗證，第二種是引用jQuery庫來進行驗證。
1、JavaScript驗證阻止提交表單
-
<html> -
<head> -
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> -
<title>JavaScript禁止提交表單</title> -
<script type="text/javascript"> -
function getObj(id){ -
var Obj = document.getElementById(id).value; -
return Obj; -
} -
function check(){ -
if(getObj("test")==""){ -
alert("文字框輸入為空，不能提交表單！"); -
document.getElementById("test").focus; -
return false;//false:阻止提交表單 } -
} -
</script> -
</head> -
<body> -
<form action="index.htm" method="post" onsubmit="return check()"> -
<input type="text" name="test" id="test"> -
<input type="submit" value="提交"> -
</form> -
</body> -
</html>
上面的方法在谷歌瀏覽器中不能夠實現，但在ie瀏覽器中可以實現
2、jQuery驗證阻止表單提交
-
<html> -
<head> -
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> -
<script type="text/javascript" src="/sunchis/script/jquery-1.3.2.js"></script> -
<script type="text/javascript"> -
$(document).ready(function(){ -
$(":submit[id=tijiao]").click(function(check){ -
var val = $(":text[id=test]").val(); -
if(val==""){ -
alert("文字框輸入為空，不能提交表單！"); -
$(":text[id=test]").focus(); -
check.preventDefault();//此處阻止提交表單 -
} -
}); -
}); -
</script> -
<title>jQuery禁止提交表單</title> -
</head> -
<body> -
<form action="index.htm" method="post"> -
<input type="text" name="test" id="test"> -
<input type="submit" id="tijiao" value="提交"> -
</form> -
</body> -
</html>
js包需要匯入