js form表单onsubmit事件用法详解

onsubmit 属性只在

表单中使用。

onsubmit事件是当表单提交时进行相关js操作的一个事件。

onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。

请看下面实例：

<code class="language-html"><script>
function submitFun(){
      alert("111");
}
</script>
<form onsubmit="submitFun();">
<input type="text" name="category">
<input type="submit" name="submit" value="提交">
</form>
</code>

上面实例中，当"提交"按钮被点击时，会触发表单的onsubmit事件，此时函数submitFun()被执行（弹出111）并且表单数据也随之提交到服务器。

 

onsubmit经常用于表单验证。请看下面实例。

<code class="language-html"><script>
function submitFun(obj){
      if(obj.category.value==''){
          alert("请输入");
          return false;
      }
}
</script>
<form onsubmit="return submitFun(this);">
<input type="text" name="category">
<input type="submit" name="submit" value="提交">
</form></code>

当"提交"按钮被点击时，依然会执行submitFun()函数，在submitFun()函数中，我们对表单输入框进行了空验证，如果为空，提示输入并return false,这样表单就不会提交（上面已经说到：当该事件触发的函数中返回false时，表单就不会被提交）。 同时，这里要注意onsubmit="return submitFun(this);"，不能掉了return，否则表单永远会提交。

本文章中的代码可以复制到这里进行运行，你不妨试一下。