笔记四: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()
};
 

 

 

 

 

 

posted @ 2018-12-03 11:17  受访市民廖先生  阅读(1506)  评论(0编辑  收藏  举报