PasswordField

Ouvrir dans ChatGPT

Ombre dwc-field 23.02

Java API

Le composant PasswordField permet aux utilisateurs de saisir un mot de passe de manière sécurisée. Il s'affiche comme un éditeur de texte en ligne où le texte saisi est masqué, remplacé typiquement par des symboles tels que des astérisques ("*") ou des points ("•"). Le symbole exact peut varier en fonction du navigateur et du système d'exploitation.

Utilisation de PasswordField

Inheritance

This class is a Field component, and inherits its features and behaviors. For an overview of Field properties, events, and other important information, please refer to the Field documentation.

PasswordField étend la classe partagée Field, qui fournit des fonctionnalités communes à tous les composants de champ. L'exemple suivant crée un PasswordField avec un label et un texte d'espace réservé.

Afficher le code

Java

Valeur du champ

Le composant PasswordField stocke et récupère sa valeur sous forme de String brut, similaire à un TextField, mais avec un rendu visuel obscurci pour masquer les caractères à la vue.

Vous pouvez récupérer la valeur actuelle en utilisant :

passwordField.getValue();

données sensibles

Bien que le champ masque visuellement le contenu, la valeur retournée par getValue() est toujours une chaîne brute. Soyez attentif à cela lorsque vous manipulez des données sensibles et cryptez ou transformez-les avant le stockage.

Pour définir ou réinitialiser la valeur par programmation :

passwordField.setValue("MySecret123!");

Si aucune valeur n'a été saisie par l'utilisateur et qu'aucune valeur par défaut n'est définie, le champ renverra une chaîne vide ("").

Ce comportement imite celui de l'HTML natif <input type="password">, où la propriété value contient l'entrée actuelle.

Usages

Le PasswordField est le mieux utilisé dans les scénarios où la capture ou la gestion d'informations sensibles, telles que des mots de passe ou d'autres données confidentielles, est essentielle pour votre application. Voici quelques exemples de quand utiliser le PasswordField :

1. Authentification et Enregistrement des Utilisateurs : Les champs de mot de passe sont cruciaux dans les applications impliquant des processus d'authentification ou d'enregistrement des utilisateurs, où une saisie sécurisée du mot de passe est requise.

2. Saisies de Formulaires Sécurisés : Lors de la conception de formulaires nécessitant la saisie d'informations sensibles, telles que des détails de carte de crédit ou des numéros d'identification personnelle (PIN), l'utilisation d'un PasswordField assure la sécurité de l'entrée de ces données.

3. Gestion de Compte et Paramètres de Profil : Les champs de mot de passe sont précieux dans les applications impliquant la gestion de compte ou les paramètres de profil, permettant aux utilisateurs de changer ou de mettre à jour leur mot de passe en toute sécurité.

Visibilité du mot de passe

Les utilisateurs peuvent révéler la valeur du PasswordField en cliquant sur l'icône de révélation. Cela permet aux utilisateurs de vérifier ce qu'ils ont saisi ou de copier l'information dans leur presse-papiers. Cependant, pour des environnements à haute sécurité, vous pouvez utiliser setPasswordReveal() pour supprimer l'icône de révélation et empêcher les utilisateurs de voir la valeur. Vous pouvez vérifier si un utilisateur peut utiliser l'icône de révélation pour montrer la valeur avec la méthode isPasswordReveal().

Correspondance de motif

Il est fortement recommandé d'appliquer un motif d'expression régulière au PasswordField en utilisant la méthode setPattern(). Cela vous permet d'imposer des règles de caractères et des exigences structurelles, obligeant les utilisateurs à créer des identifiants sécurisés et conformes. La correspondance de motifs est particulièrement utile lors de l'application de règles de mot de passe solides, telles que l'exigence d'un mélange de lettres majuscules et minuscules, de chiffres et de symboles.

Le motif doit suivre la syntaxe d'une expression régulière JavaScript, telle qu'interprétée par le navigateur. Le drapeau u (Unicode) est utilisé en interne pour garantir la validation à travers tous les points de code Unicode. Ne pas inclure de barres obliques (/) autour du motif.

Dans l'extrait suivant, le motif exige au moins une lettre minuscule, une lettre majuscule, un chiffre et une longueur minimale de 8 caractères.

passwordField.setPattern("(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,}");

Si le motif est manquant ou invalide, aucune validation ne sera appliquée.

conseil

Utilisez setLabel() pour fournir une étiquette claire décrivant l'objectif du champ de mot de passe. Pour aider les utilisateurs à comprendre les exigences du mot de passe, utilisez setHelperText() pour afficher des conseils ou des règles directement sous le champ.

Longueur minimale et maximale

Vous pouvez contrôler la longueur autorisée de la saisie de mot de passe en utilisant setMinLength() et setMaxLength() sur le PasswordField.

La méthode setMinLength() définit le nombre minimum de caractères qu'un utilisateur doit entrer dans le champ pour réussir la validation. Cette valeur doit être un entier non négatif et ne doit pas dépasser la longueur maximale si une est définie.

passwordField.setMinLength(8); // Minimum 8 caractères

Si l'utilisateur entre moins de caractères que le minimum, l'entrée échoue la validation de contrainte. Cette validation ne s'applique que lorsque la valeur du champ est modifiée par l'utilisateur.

La méthode setMaxLength() définit le nombre maximum de caractères autorisés dans le champ. La valeur doit être 0 ou supérieure. Si elle n'est pas définie ou est définie sur une valeur invalide, le champ n'a pas de limite supérieure de caractères.

passwordField.setMaxLength(20); // Maximum 20 caractères

Si l'entrée dépasse la limite maximale de caractères, le champ échoue la validation de contrainte. Comme pour la longueur minimale, cette règle ne s'applique que lorsque l'utilisateur met à jour la valeur du champ.

conseil

Utilisez à la fois setMinLength() et setMaxLength() ensemble pour créer des limites d'entrée efficaces. Consultez la documentation sur les contraintes de longueur HTML pour plus de référence.

Meilleures pratiques

Comme le composant PasswordField est souvent associé à des informations sensibles, considérez les meilleures pratiques suivantes lors de l'utilisation du PasswordField :

• Fournir un Retour d'Information sur la Force du Mot de Passe : Incorporez des indicateurs de force du mot de passe ou des mécanismes de retour d'information pour aider les utilisateurs à créer des mots de passe forts et sécurisés. Évaluez des facteurs tels que la longueur, la complexité, et un mélange de lettres majuscules et minuscules, de chiffres et de caractères spéciaux.

• Appliquer le Stockage de Mot de Passe : Ne jamais stocker les mots de passe en texte brut. Implémentez plutôt des mesures de sécurité appropriées pour gérer et stocker les mots de passe de manière sécurisée dans votre application. Utilisez des algorithmes de cryptage standards du secteur pour les mots de passe et d'autres données sensibles.

• Confirmation de Mot de Passe : Incluez un champ de confirmation supplémentaire lorsque l'utilisateur change ou crée un mot de passe. Cette mesure aide à minimiser la probabilité de fautes de frappe et s'assure que les utilisateurs saisissent correctement le mot de passe souhaité.

• Permettre la Réinitialisation de Mot de Passe : Si votre application implique des comptes d'utilisateurs, proposez une option permettant aux utilisateurs de réinitialiser leur mot de passe. Cela pourrait se faire sous la forme d'une fonctionnalité "Mot de passe oublié" qui lance un processus de récupération de mot de passe.

• Accessibilité : Configurez le PasswordField en tenant compte de l'accessibilité, afin qu'il respecte les normes d'accessibilité telles que提供 des étiquettes appropriées et une compatibilité avec les technologies d'assistance.