onsubmit和submit()详解

首先说明一点：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>