zoukankan      html  css  js  c++  java
  • 笔记四: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()
    };
     

     

     

     

     

     

  • 相关阅读:
    git本地分支管理
    SpringMVC的第一个入门案例
    原来热加载如此简单,手动写一个 Java 热加载吧
    Spring Boot2 系列教程(十七)SpringBoot 整合 Swagger2
    SpringBoot 开发案例之参数传递的正确姿势
    MENU Java 中的 final、finally、finalize 有什么不同?
    Java Web 学习(1) —— Servlet
    Spring 基础知识学习
    SpringBoot中如何灵活的实现接口数据的加解密功能?
    Java中常用的四种线程池
  • 原文地址:https://www.cnblogs.com/liaoxun/p/10057402.html
Copyright © 2011-2022 走看看