筆記四:onsubmit和onclick的區別


今天碰到關於表單提交的問題,我是用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()
};
 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM