Maison >interface Web >js tutoriel >Introduction à la façon dont JavaScript implémente le code qui empêche la soumission de formulaire

Introduction à la façon dont JavaScript implémente le code qui empêche la soumission de formulaire

巴扎黑original: 2017-08-18 10:08:051810parcourir

Cet article présente principalement la méthode JavaScript pour empêcher la soumission d'un formulaire. Il explique à travers des exemples de code ce à quoi vous devez faire attention lorsque vous empêchez la soumission d'un formulaire, ainsi que la différence entre onSubmit et check(). la

<body>
 <form action="clock.html" method="post" onsubmit="return checkLength()">
  <p>name:<input type="text" name="user" id="user"></p>
  <input type="submit" id="submit" name="submit"> 
 </form>
</body>
</html>

page html.

La première méthode : utilisez le mécanisme de blocage d'événement par défaut de l'événement, obtenez l'élément de soumission une fois la page chargée, puis enregistrez une fonction de réponse au clic pour la soumission, le paramètre étant le événement événementiel.
Une fois que l'utilisateur a cliqué sur Soumettre pour déclencher la fonction de réponse, event.preventDefault(); empêche directement l'événement par défaut de sauter de formulaire.

Deuxième méthode : Ajoutez l'attribut checkLength()"
sous l'attribut onsubmit="return checkLength()" ou la balise input avec id="submit" sous la balise form Dans la fonction function, empêchez la soumission du formulaire de return false;
Empêchez le code de la fonction d'exécuter un return down;

Voici deux événements de

1 .form

submit, soumettez le formulaire si vous appelez cette fonction directement, le formulaire sera soumis directement
onSubmit lorsque vous cliquez sur le bouton de soumission. sera déclenché en premier, puis l'événement de soumission sera déclenché. S'il est contrôlé, true sera renvoyé par défaut, donc le formulaire peut toujours être soumis

2. >

se fait en utilisant

dans JS. >, pour obtenir chaque entrée de l'utilisateur, la vérifier et renvoyer VRAI lorsqu'elle est complètement passée, sinon renvoyer faux document.myform.name.value

3. Implémentation du code de la page

/*
<form name="testform" action="hello.html" method="post" onSubmit="return check();">
 <input type="text" name="name">
 <input type="submit" value="提交">
</form>
*/

function check(){
 if (document.testform.name.value=="admin") {  
  alert("姓名不正确");  
  return false; 
  }
 else{
  return true;
  }
}

Remarque

N'écrivez pas surSoumettre en tant que : "check()", afin que le formulaire ne soit pas soumis en cas d'échec du test

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

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

Article précédent：Introduction à la méthode de téléchargement de fichiers sans actualisation en JavaScriptArticle suivant：Introduction à la méthode de téléchargement de fichiers sans actualisation en JavaScript

Articles Liés

Voir plus