Introduction à la façon dont JavaScript implémente le code qui empêche la soumission de formulaire-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-08-18 10:08:05

original

1823 Les gens l'ont consulté

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>

Copier après la connexion

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>
*/

Copier après la connexion

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

Copier après la connexion

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!