利用JS提交表单的几种方法和验证（必看篇）

Dans le travail, j'ai découvert des problèmes pratiques de soumission de formulaires, souvent, sous Internet Explorer, la soumission fonctionne bien, mais sous Firefox, il y a des problèmes, et en utilisant le bouton de soumission, cela ne fonctionne pas, donc j'ai utilisé la méthode JavaScript qui a réussi, je ne sais pas pourquoi. Sous les pressions de mon superviseur, j'ai résumé les méthodes courantes de soumission de formulaires.

Première méthode :Soumission du formulaire, ajouter l'événement onsubmit dans l'étiquette form pour juger si la soumission du formulaire est réussie

<script type="text/javascript">
   function validate(obj) {
    if (confirm("Soumettre le formulaire"63;")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://fr.oldtoolbag.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—Attention à cette manière de passer les paramètres-->
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  </form>
</body>

Deuxième méthode :En utilisant le bouton button pour déclencher l'événement de soumission du formulaire onclick="submitForm();", les autres attributs des étiquettes sont ignorés, par exemple, l'attribut onsubmit de l'étiquette form est désactivé. Dans ce cas, pour effectuer la validation du formulaire, le code de validation peut être placé dans la méthode submitForm();

<script type="text/javascript">
   function validate() {
    if (confirm("Soumettre le formulaire"63;")) {
      return true;
    } else {
      return false;
    }
   }
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://fr.oldtoolbag.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—On peut également utiliser document.getElementByIdx_x(“l’id de ce bouton”).click(); pour exécuter l’événement onclick-->
  </form>
</body>

Troisième méthode :Placer l'événement onsubmit dans l'étiquette submit, plutôt que dans l'étiquette form, dans ce cas, la validation du formulaire est inefficace, et en cliquant sur le bouton de soumission, le formulaire est soumis directement

<script type="text/javascript">
   function validate() {
    if (confirm("Soumettre le formulaire"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://fr.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  </form>
</body>

Quatrième méthode :Ajouter l'événement onclick au bouton submit, cet événement est utilisé pour la validation du formulaire de soumission, fonction semblable à l'ajout de l'événement onsubmit dans l'étiquette form

<script type="text/javascript">
   function validate() {
    if (confirm("Soumettre le formulaire"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://fr.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  </form>
</body>

Cinquième méthode :

<body>
  <form action="https://fr.oldtoolbag.com" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  </form>
 </body>
  <script type="text/javascript">
   function validate() {
      if (confirm("Soumettre le formulaire"63;")) {
        return true;
      } else {
        return false;
      }
}

En cliquant sur le bouton button pour déclencher l'événement de soumission du formulaire onclick="submitForm();", d'autres attributs dans les balises seront ignorés, par exemple, l'attribut onsubmit dans la balise form est désactivé. Dans ce cas, pour effectuer la validation du formulaire, vous pouvez mettre le code de validation dans la méthode submitForm();

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

La présente série d'articles sur les différentes méthodes de soumission de formulaires utilisant JavaScript et les validations (article à lire impérativement) que je partage avec vous est tout ce que j'ai à offrir. J'espère que cela vous sera utile et que vous continuerez à soutenir le tutoriel criant.

教程基础