今天碰到關於表單提交的問題,我是用submit還是用onclick好呢,然后我去百度了一下兩者的區別:
onsubmit只能表單上使用,提交表單前會觸發, onclick是按鈕等控件使用, 用來觸發點擊事件。
在提交表單前,一般都會進行數據驗證,可以選擇在submit按鈕上的onclick中驗證,也可以在onsubmit中驗證。但是onclick比onsubmit更早的被觸發。也就是說onclick觸發時間要比onsubmit要早
這是他的提交過程:
1、用戶點擊按鈕 ---->
2、觸發onclick事件 ---->
3、onclick返回true或未處理onclick ---->
4、觸發onsubmit事件 ---->
5、onsubmit未處理或返回true ------>
6、提交表單.
onsubmit處理函數返回false,onclick函數返回false,都不會引起表單提交。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 function validateForm() { 7 var x = document.forms["myForm"]["fname"].value; 8 var y = document.forms["myForm"]["password"].value; 9 if (x == null || x == "") { 10 alert("需要輸入名字。"); 11 return false; 12 } 13 else if(y == null || y == "") 14 { 15 alert("需要輸入密碼。"); 16 return false; 17 } 18 else 19 alert("輸入成功。"); 20 return true; 21 } 22 </script> 23 </head> 24 <body> 25 //用onclick 26 <form name="myForm" action="demo_form.php" 27 onclick="validateForm()" method="post"> 28 名字: <input type="text" name="fname"> 29 密碼:<input type="text" name="password"> 30 <input type="submit" value="提交"> 31 </form> 32 //用onsubmit 33 <form name="myForm" action="demo_form.php" 34 onclick="validateForm()" method="post"> 35 名字: <input type="text" name="fname"> 36 密碼:<input type="text" name="password"> 37 <input type="submit" value="提交"> 38 </form>
onsubmit="return validateForm()" 為什么不是 onsubmit="validateForm()" ??
onsubmit="validateForm()" 能夠調用 validateForm() 對表單進行驗證,但是在驗證不通過的情況下,並不能阻止表單提交。
onsubmit="return validateForm()" 當驗證不通過時,返回 false,可以阻止表單提交。
為何?
原來 onsubmit 屬性就像是 <form> 這個 html 對象的一個方法名,其值(一字符串)就是其方法體,默認返回 true;
onsubmit="return validateForm()"
相當於:
Form.prototype.onsubmit = function() {
return validateForm()
};