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包需要匯入