Maison > interface Web > js tutoriel > le corps du texte

js form表单onsubmit事件用法详解

WBOY
Libérer: 2016-06-01 09:54:53
original
2400 Les gens l'ont consulté

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>
Copier après la connexion

上面实例中,当"提交"按钮被点击时,会触发表单的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>
Copier après la connexion

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

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal