Comment valider l'entrée du formulaire à l'aide de LayUI?

Comment valider l'entrée du formulaire à l'aide de LayUI?

Layui, un cadre frontal populaire, offre une approche simple pour la validation de la forme. Il exploite son propre système de validation, éliminant le besoin de bibliothèques externes. Le mécanisme de base implique d'attribuer des règles de validation directement à vos champs de formulaire à l'aide d'attributs spécifiques dans le HTML de l'élément de formulaire. Ces attributs définissent les critères de validation. LayUi vérifie automatiquement ces règles lorsque le formulaire est soumis.

Illustrons avec un exemple:

 <code class="html"><form class="layui-form" lay-filter="example"> <div class="layui-form-item"> <label class="layui-form-label">Username</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required|user" autocomplete="off" placeholder="Enter your username" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">Password</label> <div class="layui-input-block"> <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="Enter your password" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button> </div> </div> </form> <script> layui.use(&#39;form&#39;, function(){ var form = layui.form; form.on(&#39;submit(formDemo)&#39;, function(data){ // data.field contains the form data console.log(data.field); // Perform further actions with the validated data return false; // Prevent default form submission }); }); </script></code>

Dans cet exemple, l'attribut lay-verify Spécifie les règles de validation: required garantit que le champ n'est pas vide, et user et pass sont des règles de vérification personnalisées (vous devrez les définir séparément à l'aide des fonctions de vérification personnalisées de LayUI). L'attribut lay-filter vous permet de cibler le formulaire pour la gestion des événements. Le code JavaScript utilise form.on('submit', ...) pour capturer la soumission de formulaire et accéder aux données validées via data.field . N'oubliez pas d'inclure le fichier JavaScript Layui dans votre projet.

La validation de formulaire de Layui peut-elle gérer efficacement différents types d'entrée?

Oui, la validation de la forme de Layui gère efficacement divers types d'entrée. Ses règles de vérification intégrées, ainsi que la possibilité de définir des règles personnalisées, permettent une validation robuste sur différents champs d'entrée. Il s'intègre de manière transparente aux types d'entrée courants tels que le texte, le mot de passe, l'e-mail, le numéro, les boutons radio, les cases à cocher et les éléments de sélection. Par exemple:

• Email: lay-verify="email" vérifie un format de messagerie valide.
• Numéro: vous pouvez utiliser lay-verify="number" et potentiellement le combiner avec des vérifications de plage à l'aide de fonctions de validation personnalisées.
• Boutons radio et cases à cocher: LayUi les gère efficacement via la règle de vérification required , garantissant qu'au moins une option est sélectionnée.
• SELECT Éléments: similaire aux boutons radio et aux cases à cocher, required garantit qu'une sélection est effectuée.
• Entrées de fichiers: Bien que non directement pris en charge par des règles intégrées, vous pouvez utiliser des fonctions de validation personnalisées pour vérifier les types de fichiers, les tailles, etc.

La flexibilité des fonctions de vérification personnalisées vous permet d'adapter la validation de Layui à pratiquement tous les types de type d'entrée et les besoins de validation spécifiques.

Quels sont les pièges courants à éviter lors de l'utilisation de LayUi pour la validation de la forme?

Plusieurs pièges communs peuvent survenir lors de l'utilisation de LayUi pour la validation de la forme:

• Oublier lay-verify : L'erreur la plus courante est d'omettre l'attribut lay-verify sur les champs d'entrée, rendant la validation inefficace.
• Noms de règles incorrects: assurez-vous d'utiliser les noms de règles corrects (par exemple, required , email , number ) et définir avec précision les règles personnalisées. Les fautes de frappe entraîneront des échecs de validation.
• Initialisation JavaScript manquante: ne pas initialiser le module de formulaire de LayUi ( layui.use('form', ...) ) empêche la validation de fonctionner.
• Ignorer return false; : Dans le gestionnaire de soumission de formulaire, n'oubliez pas d'inclure return false; Pour éviter le comportement de soumission de formulaire par défaut et vous permettre de gérer les données validées.
• SUR-RÉLALISATION SUR LA VALIDATION côté client: N'oubliez pas que la validation côté client (comme les LayUI) concerne l'expérience utilisateur et les vérifications initiales. Effectuez toujours la validation côté serveur pour assurer l'intégrité et la sécurité des données. La validation côté client peut être contournée.
• Ne pas gérer les erreurs gracieusement: ne laissez pas simplement les messages d'erreur par défaut d'affichage de layui. Personnalisez-les pour une meilleure expérience utilisateur (voir la section suivante).

Comment puis-je personnaliser les messages de validation de formulaire de Layui pour une meilleure expérience utilisateur?

Layui permet la personnalisation des messages de validation pour améliorer l'expérience utilisateur. Vous pouvez y parvenir via des fonctions de validation personnalisées. Voici comment:

 <code class="javascript">layui.use('form', function(){ var form = layui.form; // Define custom validation rules form.verify({ user: function(value){ if(value.length </code>

Ce code définit deux règles de vérification personnalisées, user et pass . La règle user vérifie la longueur du nom d'utilisateur, renvoyant un message d'erreur personnalisé s'il est inférieur à 5 caractères. La règle pass utilise une expression régulière pour valider le format de mot de passe et fournit un message d'erreur personnalisé. Cette approche permet des messages d'erreur très sur mesure, conduisant à une expérience plus conviviale. N'oubliez pas d'ajuster ces règles et messages en fonction de vos exigences d'application spécifiques.

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!