recherche

Maison  >  Article  >  interface Web  >  Validation des formulaires à l'aide de Parsley.js

Validation des formulaires à l'aide de Parsley.js

WBOY
WBOYavant
2023-08-31 08:21:061405parcourir

使用 Parsley.js 验证表单

Dans ce tutoriel, nous allons vous montrer comment utiliser Parsley.js, une bibliothèque JavaScript principalement utilisée pour valider des formulaires. Parsley aide à valider les formulaires d'une manière très subtile et simple et c'est l'une des bibliothèques de validation de formulaires les plus utilisées.

Caractéristiques de Parsley.js

Il existe de nombreuses raisons pour lesquelles Parsley est un bon choix pour valider les formulaires JavaScript. Certains d’entre eux sont mentionnés ci-dessous.

  • API DOM intuitive - L'API DOM vous permet d'utiliser un anglais simple dans le balisage HTML et Parsley fera le reste. Même pour une simple validation de formulaire, vous n'avez pas besoin d'écrire une seule ligne de JavaScript.

  • Validation dynamique du formulaire - Parsley peut facilement détecter les modifications du formulaire et adapter sa validation en conséquence.

  • Beaucoup de validateurs - Il existe un grand nombre de validateurs intégrés présents dans Parsley. Nous pouvons également utiliser un validateur Ajax si nécessaire.

  • Très fiable - Il est sans bug et rigoureusement testé.

  • Axé sur l'expérience utilisateur - Parsley est spécialisé dans l'interface utilisateur et l'UX, et nous pouvons même remplacer presque tous les comportements par défaut de Parsley pour répondre exactement à vos besoins.

Comment utiliser Persley pour valider un formulaire

Maintenant que nous en savons un peu plus sur Parsley.js, il est temps de nous concentrer sur un exemple utilisant Parsley. Considérez le fichier "index.html" suivant, dans lequel nous avons un formulaire contenant du code JavaScript simple.

Exemple

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Parsely.js Example</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
   crossorigin="anonymous"></script>
   <script
   src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/dist/parsley.js"></script>
</head>
<body>
   <h2>Fill in the form and click the validate button at the bottom</h2>
   <form id="demo-form" data-parsley-validate="">
   <label for="fullname">Enter Your Full Name * :</label>
   <input type="text" class="form-control" name="fullname" required="">
   <br /><br />
   <label for="email">Enter Your Email * :</label>
   <input type="email" class="form-control" name="email" data-parsleytrigger="change" required="">
   <br /><br />
   <label for="contactMethod">Please Enter Your Preferred Contact Method*:</label> Email: <input type="radio" name="contactMethod"id="contactMethodEmail" value="Email" required=""> Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
   <br /><br />
   <label for="hobbies">Enter Your Hobbies (Optional, but 2 minimum):</label>
   <p>
      Coding <input type="checkbox" name="hobbies[]" id="hobby1"value="ski" data-parsley-mincheck="2"><br> Walking <input type="checkbox"name="hobbies[]" id="hobby2" value="run"><br> Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br> Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br> Traveling <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br> Writing <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br></p>
   <p>
      <label for="heard">Heard about us via *:</label>
      <select id="heard" required="">
         <option value="">Choose..</option>
         <option value="press">Press</option>
         <option value="net">Internet</option>
         <option value="mouth">Word of mouth</option>
         <option value="other">Other..</option>
      </select>
   </p>
   <p>
      <label for="message">Message (20 chars min, 100 max) :</label>
      <textarea id="message" class="form-control" name="message" dataparsley- trigger="keyup" data-parsley-minlength="20" data-parsleymaxlength=" 100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validationthreshold="10"></textarea>
   </p>
   <br>
   <input type="submit" class="btn btn-default" value="validate">
   </form>
   <script>
      $(function() {
         $('#demo-form').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);
         })
         .on('form:submit', function() {
            return false;
         });
      });
   </script>
</body>
</html>

Cliquez sur le bouton "Modifier et exécuter" en haut pour exécuter ce code et voir le formulaire de sortie.

Instructions

Dans ce code, nous avons un formulaire avec plusieurs zones de texte qui nécessitent des valeurs différentes. Dans chaque valeur, nous avons un mot-clé de texte, une case à cocher ou une option.

De plus, il y a un bouton « Vérifier » à la fin du code. Vous obtiendrez des erreurs contextuelles de Parsley lorsque vous cliquez sur le bouton sans remplir aucun formulaire, et vous obtiendrez des erreurs de validation de Parsley.js lorsque certains des champs que vous saisissez ne correspondent pas à leurs attentes.

Vous pouvez exécuter ce code ici et remplir les différents champs en fonction de l'objectif de test choisi.

Conclusion

Dans ce tutoriel, nous utilisons un exemple simple pour montrer comment valider un formulaire en JavaScript à l'aide de Parsley.js.

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：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment faire réagir un objet polygone aux événements de rotation à l'aide de FabricJS ?Article suivant：Comment faire réagir un objet polygone aux événements de rotation à l'aide de FabricJS ?

Articles Liés

Voir plus