onsubmit和submit()详解

骑猪看日落 2022-05-17 00:40 126阅读 0赞

首先说明一点：onsubmit是Form对象的事件句柄，而submit()是form对象的事件方法

*  还有一个Submit 对象，代表 HTML 表单中的一个提交按钮 (submit button)。在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。（这里我们暂且不详细说明哦）

一、onsubmit：在表单提交之前调用

当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。注意，当调用方法Form.submit() 时，该处理器函数不会被调用。

如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

由于 onsubmit 句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的。看下面的示例(验证密码是否为空，如果为空，就取消表单的提交)：

<form action="" methods="post" onsubmit="return check()">
    
      <input type="text" name="text" placeholder="请输入用户名"/>
      <input type="password" id="password"  name="password" placeholder="请输入密码"/>
      <input type="submit" value="提交"/>
    </form>
    
    
    <script>
     var re = /^[^\s]+$/;
     var pw = document.querySelector('#password')
      check(){
         if(re.test(pw.value)){
                return true;//不为空
    
            }else{
                return false;//为空
    
            }
    
      }
    
    </script>

注意表单验证一定要写成

<from action="" method="post" onsubmit="return check()">//return不可少，切记
    ...............
    </from>

submit()：

submit() 方法把表单数据提交到 Web 服务器。该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。

看下面的示例：

<form action="" methods="post" id="formP">
    
      <input type="text" name="text" placeholder="请输入用户名"/>
      <input type="password" id="password"  name="password" placeholder="请输入密码"/>
      <input type="button" id="btn" value="提交"/>
    </form>
    
    <script>
       var oForm = document.querySelector('#formP');
       var oBtn = document.querySelector('#btn');\
       oBtn.onclick = function(){
         oForm.submit()
       }
       
    </script>