10 plugins de validation de formulaire jQuery-js tutoriel-php.cn

10 plugins de validation de formulaire jQuery

Les plats clés

HTML5 a introduit de nouveaux attributs de formulaire pour la validation de formulaire basée sur le navigateur, mais il a des restrictions telles que l'incapacité à personnaliser les messages d'erreur et le style, et la nécessité de créer des modèles pour les champs d'entrée. Les plugins de validation de formulaire jQuery visent à surmonter ces limitations.
L'article fournit une liste de 10 plugins de validation de formulaire jQuery populaires, notamment le persil, le validateur de formulaire jQuery, le plugin de validation JQuery, le validateur bootstrap, la fumée, la forme de la forme, la validatr, le validetta, la valeur de la valeur et le h5validate. Chaque plugin a des fonctionnalités et des capacités uniques, telles que les règles de validation personnalisées, la localisation, la validation de l'Ajax à distance, les suggestions d'entrée, etc.

HTML5 a introduit de nouveaux attributs de formulaire afin que le navigateur puisse valider les formulaires nativement. Avec CSS3 et JavaScript, vous pouvez réaliser une validation de formulaire de base sans avoir besoin d'un plugin - comme décrit dans cet article. Mais cela a quelques restrictions:

Les 10 plugins de validation de formulaire jQuery suivants se fixent le but de personnaliser les messages d'erreur et le style, ainsi que la simplification de la création de règles de validation.

1. Parsley

Un plugin extensible qui propose des options ordinaires comme la localisation et les règles de validation personnalisées, mais également une validation AJAX distante. La documentation est propre et facile à lire et le projet est activement maintenu. Les règles de validation peuvent être contrôlées à l'aide du formulaire HTML5 ou des attributs de données personnalisés.

Voir la démonstration du plugin de persil de Pen par SitePoint (@SitePoint) sur Codepen.

site Web Code source

2. JQUERY Form Validator

Un plugin modulaire, qui offre un ensemble de base de règles de validation par défaut et vous permet de charger d'autres modules à la demande. Par exemple: un validateur de fichiers lors du téléchargement de fichiers, mais également des modules de sécurité, de sécurité ou d'emplacement. Il vous permet également de fournir des suggestions d'entrée. La validation est contrôlée avec des attributs de données HTML5.

Voir la démo du plugin de validateur de formulaire Pen jQuery par SitePoint (@SitePoint) sur codepen.

site Web Code source

3. JQUERY Validation Plugin

l'un des premiers plugins de validation de 2006. Il vous permet de spécifier des règles de validation personnalisées à l'aide d'attributs HTML5 ou d'objets JavaScript. Il a également de nombreuses règles par défaut implémentées et propose une API pour créer facilement des règles vous-même. Trouver des informations détaillées sur le plugin peut être difficile au début et elle se limite à jQuery 1.x, mais ils ont promis de l'améliorer - voir cette campagne.

Voir la démo du plugin de validation de Pen jQuery par SitePoint (@SitePoint) sur Codepen.

site Web Code source

4. Bootstrap Validator

un plugin de validation jQuery pour bootstrap. Il s'agit essentiellement d'un wrapper autour de la validation de formulaire native à l'aide d'attributs HTML5, mais peut également être utilisé pour ajouter des règles personnalisées. Il affiche toujours les messages d'erreur du navigateur, traduit automatiquement dans la langue correcte.

Voir la démo du plugin Bootstrap Validator de stylo par SitePoint (@SitePoint) sur Codepen.

site Web Code source

5. Fumée

La fumée est une collection de composants pour bootstrap - y compris un validateur de formulaire. Par rapport à l'autre validateur bootstrap (# 4), il n'utilise pas la validation du navigateur natif - les messages d'erreur ne sont donc pas automatiquement localisés et les règles de validation doivent être spécifiées à l'aide de HTML5 et d'attributs de données, ainsi que JavaScript.

Voir la démonstration du plugin de validation de la fumée de Pen par SitePoint (@SitePoint) sur Codepen.

site Web Code source

6. FormValidation

Un plugin de validation jQuery premium à partir de 50 $ avec des intégrations intégrées pour bootstrap, fondation et autres. Il a une énorme quantité de règles de validation ainsi que des options et pourrait être rentable pour les applications avec de nombreuses formes complexes.

10 plugins de validation de formulaire jQuery

Site Web

7. Validatr

Un wrapper très basique pour la validation du formulaire par le navigateur qui utilise des messages d'erreur natifs dans la mesure du possible, contrôlé avec des attributs de formulaire HTML5. Il peut être utilisé comme polyfill ou pour personnaliser le style de message d'erreur. Rien de plus, rien de moins.

Voir la démonstration du plugin Pen Validatr par SitePoint (@SitePoint) sur Codepen.

site Web Code source

8. Validetta

Ce plugin offre une validation à l'aide d'un attribut de données, avec des options assez limitées. Il est livré avec les règles de validation de base, tout le reste peut être ajouté avec des expressions régulières personnalisées - mais il n'y a aucun exemple le démontre. Par rapport aux autres plugins, la seule fonctionnalité unique est que les messages d'erreur sont affichés dans une bulle (voir démo ci-dessous).

Voir la démo du plugin Pen Validetta par SitePoint (@SitePoint) sur Codepen.

site Web Code source

9. jQuery.validité

Un plugin pour contrôler la validation avec JavaScript uniquement - pas de HTML5 ou d'attributs de données. Bien que cela puisse être utile pour les règles de validation dynamique, le plugin n'offre pas suffisamment d'options pour rendre l'écriture efficace. Il n'autorise même pas l'utilisation de nouveaux attributs de type HTML5 comme le courrier électronique, et il ne fournit pas de fonction pour vérifier si un formulaire est valide - nécessaire pour afficher un message de réussite.

Voir la démo du plugin Pen jQuery.Validité par SitePoint (@SitePoint) sur Codepen.

site Web Code source

10. h5validate

Ce plugin a malheureusement été abandonné par son créateur (Eric Elliott). Par conséquent, le site Web de démo / documentation renvoie un 404 et il y a deux douzaines de problèmes ouverts. Le plugin ne valide pas automatiquement les entrées par type et l'exemple suivant n'affiche même pas les messages d'erreur. Nous l'avons inclus dans la liste, car Eric recherche un nouveau mainteneur pour le projet, il y a donc une chance qu'à un moment donné dans le futur, cela puisse y retourner une vie.

Voir la démo du plugin Pen H5Validate par SitePoint (@SitePoint) sur Codepen.

Code source

Conclusion

Eh bien, c'est la liste des dix premières des plugins de validation de formulaire jQuery populaires. Si vous avez eu une expérience avec ceux-ci (bon ou mauvais!), Ou si vous connaissez d'autres plugins de validation de formulaire qui méritent d'être mentionnés, veuillez nous le faire savoir dans les commentaires!

Questions fréquemment posées (FAQ) sur les plugins de validation de formulaire jQuery

Que sont les plugins de validation de formulaire jQuery?

Les plugins de validation de formulaire jQuery sont des outils qui aident à valider les données saisies dans les champs de formulaire sur une page Web. Ils s'assurent que les données saisies par l'utilisateur sont correctes et dans le format requis avant d'être soumis au serveur. Ces plugins sont construits à l'aide de jQuery, une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Ils fournissent un moyen facile et efficace de valider les champs de forme, en réduisant la quantité de codage manuel requis.

Comment fonctionnent les plugins de validation des formulaires jQuery?

Les plugins de validation de formulaire jQuery fonctionnent-ils en vérifiant les données saisies dans les champs de formulaire par rapport à certaines règles prédéfinies. Ces règles peuvent inclure des vérifications pour les champs requis, les adresses e-mail valides, les mots de passe correspondants, la longueur minimale et maximale des entrées, etc. Si les données entrées ne respectent pas ces règles, le plugin affiche un message d'erreur, empêchant le formulaire de soumettre jusqu'à ce que les erreurs soient corrigées.

Pourquoi dois-je utiliser les plugins de validation de formulaire jQuery?

L'utilisation des plugins de validation de formulaire jQuery peut considérablement simplifier le processus de validation du formulaire. Ils vous évitent d'avoir à écrire du code JavaScript complexe pour valider chaque champ de formulaire individuellement. Ils fournissent également un moyen cohérent de gérer la validation du formulaire entre différents navigateurs et appareils. De plus, ils améliorent l'expérience utilisateur en fournissant des commentaires immédiats sur toutes les erreurs, permettant aux utilisateurs de les corriger avant de soumettre le formulaire.

Comment installer un plugin de validation de formulaire jQuery?

Pour installer un JQUERY Form Validation Plugin, vous devez d'abord inclure la bibliothèque JQuery dans votre page Web. Ensuite, vous pouvez télécharger le plugin et l'inclure dans votre page Web à l'aide d'une balise de script. Certains plugins peuvent également nécessiter des fichiers CSS supplémentaires pour être inclus pour styliser les messages d'erreur.

Puis-je personnaliser les messages d'erreur affichés par le plugin de validation de formulaire jQuery?

Oui, la plupart des plugins de validation de formulaire jQuery JQuery vous permettre de personnaliser les messages d'erreur. Vous pouvez modifier le texte des messages, le style dans lequel ils sont affichés et même la langue dans laquelle ils sont écrits. Cela vous permet d'adapter les messages d'erreur à vos besoins spécifiques et à la langue et à la culture de vos utilisateurs.

Les plugins de validation de formulaire jQuery sont-ils compatibles avec tous les navigateurs?

Les plugins de validation de formulaire jQuery sont généralement généralement Compatible avec tous les navigateurs modernes qui prennent en charge JavaScript et JQuery. Cependant, le niveau de compatibilité peut varier entre différents plugins et différentes versions du même plugin. C'est toujours une bonne idée de tester le plugin dans différents navigateurs pour s'assurer qu'il fonctionne comme prévu.

Puis-je utiliser plusieurs plugins de validation de formulaire jQuery sur la même page Web?

Bien qu'il soit techniquement possible d'utiliser plusieurs plugins de validation de formulaire jQuery sur la même page Web, il n'est généralement pas recommandé. L'utilisation de plusieurs plugins peut entraîner des conflits et peut rendre la page Web plus lente pour charger et répondre. Il est généralement préférable de choisir un plugin qui répond à tous vos besoins et de s'en tenir.

Comment mettre à jour un plugin de validation de formulaire jQuery?

Pour mettre à jour un plugin de validation de formulaire jQuery, vous pouvez Téléchargez la dernière version du plugin et remplacez les anciens fichiers par les nouveaux. Certains plugins peuvent également fournir une fonction de mise à jour qui télécharge et installe automatiquement la dernière version.

Puis-je utiliser des plugins de validation JQuery Form avec d'autres bibliothèques JavaScript?

Oui, les plugins de validation de formulaire jQuery peuvent être utilisés avec d'autres bibliothèques JavaScript. Cependant, vous devez faire attention à éviter les conflits entre les bibliothèques. jQuery fournit une fonction noconflict qui vous permet d'utiliser jQuery avec d'autres bibliothèques qui utilisent le symbole $.

y a-t-il des alternatives aux plugins de validation de formulaire jQuery?

Oui, il existe de nombreuses alternatives à jQuery Plugins de validation de formulaire. Il s'agit notamment de la validation du formulaire HTML5 native, de la validation côté serveur et des bibliothèques de validation pour d'autres cadres JavaScript tels que AngularJS et React. Cependant, les plugins de validation de la forme jQuery sont toujours un choix populaire en raison de leur facilité d'utilisation et de leur large gamme de fonctionnalités.

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!