Choisissez Insertion > Spry > Validation de mot de passe Spry.
Dernière mise à jour le
1 mai 2021
Remarque :
Les widgets Spry ont été remplacés par des widgets jQuery sous Dreamweaver CC et versions ultérieures. Bien qu’il soit toujours possible de modifier des widgets Spry sur votre page, vous ne pouvez pas en ajouter de nouveaux.
À propos du widget Validation de mot de passe
Le widget Validation de mot de passe Spry est un champ de texte de mot de passe que vous pouvez utiliser pour appliquer les règles de mot de passe (par exemple, le nombre et le type de caractères). Le widget affiche des messages d’avertissement ou d’erreur en fonction des données saisies par l’utilisateur.
Remarque :
Vous devez vous être familiarisé avec les widgets de validation Spry avant de pouvoir utiliser le widget Mot de passe. S’ils ne vous sont pas familiers, consultez la rubrique Utilisation du widget Validation de zone de texte Spry ou toute autre présentation du widget de validation avant de commencer. Cette présentation n’aborde pas tous les concepts du widget de validation de base.
L’exemple suivant montre un widget Validation de mot de passe dans différents états :
A. Widget Mot de passe, nombre minimal de caractères B. Widget Mot de passe, nombre maximal de caractères C. Widget Mot de passe, état obligatoire
Le widget Validation de mot de passe peut posséder divers états (par exemple valide, obligatoire, nombre minimal de caractères, etc.). Vous pouvez modifier les propriétés de ces états en modifiant le fichier CSS correspondant (SpryValidationPassword.css), en fonction des résultats de validation désirés. Un widget Validation de mot de passe peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors de la zone de texte, pendant qu’il entre des données ou lorsqu’il tente d’envoyer le formulaire.
Etat initial
Lorsque la page se charge dans le navigateur, ou lorsque l’utilisateur réinitialise le formulaire.
Etat actif
Lorsque l’utilisateur place le point d’insertion à l’intérieur du widget.
Etat valide
Lorsque l’utilisateur a entré des informations correctes, ce qui permet l’envoi du formulaire.
Etat de résistance non valide
Lorsque l’utilisateur entre du texte qui ne correspond pas aux critères de résistance du champ de texte de mot de passe. (Par exemple, si vous avez spécifié qu’un mot de passe doit contenir au moins deux lettres majuscules, et que le mot de passe entré ne contient aucune lettre majuscule ou uniquement une seule).
Etat obligatoire
Lorsque l’utilisateur n’a pas entré du texte obligatoire dans le champ de texte.
Nombre minimal de caractères
Lorsque l’utilisateur a entré moins de caractères que le nombre minimal requis pour le champ de texte de mot de passe.
Nombre maximal de caractères
Lorsque l’utilisateur a entré plus de caractères que le nombre maximal admis pour le champ de texte de mot de passe.
Vous trouverez une explication plus détaillée du fonctionnement des widgets Validation de mot de passe, ainsi que des informations supplémentaires sur la structure du widget, à l’adresse www.adobe.com/go/learn_dw_sprypassword_fr.
Insertion et modification du widget Validation de mot de passe
Insertion du widget Validation de mot de passe
-
-
Complétez la boîte de dialogue Attributs d’accessibilité à des balises objet, puis cliquez sur OK.
Remarque :
Vous pouvez également insérer un widget Validation de mot de passe par l’intermédiaire de la catégorie Spry du panneau Insertion.
Modification de l’état obligatoire d’un widget Validation de mot de passe
Par défaut, tous les widgets Validation de mot de passe que vous insérez à l’aide de Dreamweaver exigent que l’utilisateur y entre des données lorsqu’ils sont publiés sur une page web. Vous pouvez toutefois rendre la saisie de mot de passe dans certaines zones facultative pour l’utilisateur.
-
Sélectionnez un widget Validation de mot de passe dans la fenêtre de document en cliquant sur son onglet bleu.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l’option Obligatoire, en fonction de vos préférences.
Affichage des états du widget en mode Création
-
Sélectionnez un widget Validation de mot de passe dans la fenêtre de document en cliquant sur son onglet bleu.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l’état à afficher dans le menu déroulant Aperçu des états. Par exemple, si vous voulez afficher le widget dans son état valide, sélectionnez Valide.
Définition du moment de validation
Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu’il tape des données ou lorsqu’il tente d’envoyer le formulaire.
-
Sélectionnez un widget Validation de mot de passe dans la fenêtre de document en cliquant sur son onglet bleu.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l’option qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit.
onBlur
Validation quand l’utilisateur clique en dehors du champ de texte de mot de passe.
Remplacer
Validation lorsque l’utilisateur modifie du texte à l’intérieur du champ de texte de mot de passe.
onSubmit
Validation lorsque l’utilisateur tente d’envoyer le formulaire. L’option onSubmit est activée par défaut et ne peut pas être désactivée.
Définition de la résistance de mot de passe
La résistance de mot de passe désigne le degré auquel les combinaisons de certains caractères remplissent les exigences d’un champ de texte de mot de passe. Par exemple, si vous avez créé un formulaire dans lequel les utilisateurs sélectionnent un mot de passe, vous pouvez les forcer à inclure un certain nombre de lettres majuscules dans le mot de passe, un certain nombre de caractères spéciaux, etc.
Remarque :
Par défaut, aucune des options disponibles n’est définie pour le widget Mot de passe.
Cliquez sur l’onglet bleu du widget Validation de mot de passe pour le sélectionner.
Définissez les options dans l’inspecteur Propriétés (Fenêtre > Propriétés) à votre convenance. Les nombres que vous entrez dans les champs d’option sont les nombres requis en vue de la validation du widget. Par exemple, si vous entrez dans la zone Nombre minimal de caractères, le widget n’effectuera pas la validation tant que l’utilisateur n’aura pas entré au moins 8 caractères dans la zone du mot de passe.
Nombre minimal/maximal de caractères
Spécifie le nombre minimal et maximal de caractères requis pour que le mot de passe soit valide.
Nombre minimal/maximal de lettres
Spécifie le nombre minimal et maximal de lettres (a, b, c, etc.) requis pour que le mot de passe soit valide.
Nombre minimal/maximal de chiffres
Spécifie le nombre minimal et maximal de chiffres (1, 2, 3, etc.) requis pour que le mot de passe soit valide.
Nombre minimal/maximal de majuscules
Spécifie le nombre minimal et maximal de lettres majuscules (A, B, C, etc.) requis pour que le mot de passe soit valide.
Nombre minimal/maximal de caractères spéciaux
Spécifie le nombre minimal et maximal de caractères spéciaux (!, @, #, etc.) requis pour que le mot de passe soit valide.
Si vous laissez l’une des options ci-dessus vides, le widget n’effectuera pas de validation par rapport à ce critère. Par exemple, si vous laissez l’option du nombre minimal/maximal de chiffres vide, le widget ne recherche pas les chiffres dans la chaîne du mot de passe.
Personnalisation du widget Validation de mot de passe
Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Validation de mot de passe, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de mot de passe de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l’adresse www.adobe.com/go/learn_dw_sprypassword_custom_fr.
Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationPassword.css. Dreamweaver enregistre le fichier SpryValidationPassword.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de mot de passe Spry. La consultation de ce fichier peut s’avérer utile, car il contient des informations commentées au sujet des différents styles qui s’appliquent au widget.
Remarque :
Même s’il est facile de modifier directement les règles du widget Validation de mot de passe dans le fichier CSS qui l’accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Définition du style du widget Validation de mot de passe (instructions générales)
-
Ouvrez le fichier SpryValidationPassword.css.
-
Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d’arrière-plan de l’état obligatoire du widget Mot de passe, modifiez la règle input.passwordRequiredState dans le fichier SpryValidationPassword.css.
-
Apportez les modifications désirées au code CSS, puis enregistrez le fichier.
Le fichier SpryValidationPassword.css contient de nombreux commentaires qui expliquent le code et le rôle de certaines règles. Pour plus d’informations, consultez les commentaires dans le fichier.
Définition du style du texte de message d’erreur d’un widget Validation de mot de passe
Par défaut, les messages d’erreur du widget Validation de mot de passe s’affichent en rouge, entourés d’un bord plein de 1 pixel d’épaisseur.
-
Pour modifier le style des messages d’erreur d’un widget Validation de mot de passe, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte.
Texte à modifier
Règle CSS pertinente
Propriétés à modifier
Texte de message d’erreur
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d’arrière-plan du widget Validation de mot de passe
-
Pour modifier les couleurs d’arrière-plan du widget Validation de mot de passe dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d’arrière-plan par défaut.
Couleur à modifier
Règle CSS pertinente
Propriété à modifier
Couleur d’arrière-plan du widget dans un état valide
.passwordValidState input, input.passwordValidState background-color: #B8F5B1;
Couleur d’arrière-plan du widget dans un état non valide
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input background-color: #FF9F9F;
Couleur d’arrière-plan du widget actif
.passwordFocusState input, input.passwordFocusState background-color: #FFFFCC;
Autres ressources similaires
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?