Password Strength
Sous le champ mot de passe, une barre se remplit au tiers, aux deux tiers ou en entier, avec le verdict Faible, Moyen ou Fort, recalculé à chaque touche.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
À chaque événement input, le mot de passe gagne un point par critère rempli : 6 caractères ou plus, 10 ou plus, une majuscule (A-Z), un chiffre, un caractère hors lettres et chiffres (accent compris). De 0 à 2 points : barre à 33 % en rouge et « Faible » ; 3 points : 66 % en orange et « Moyen » ; 4 ou 5 : barre pleine en vert et « Fort ». Champ vide : barre vide et texte de départ, « Force du mot de passe ».
L'état est porté par un seul attribut, data-strength sur .pwsm-group (empty, weak, medium, strong) ; le CSS en déduit largeur et couleurs, la barre glisse en 0,4 s. Aucun style n'est écrit en ligne sur la barre : vider le champ puis retaper un mot de passe la fait repartir normalement.
Les libellés sont lus dans le HTML (bloc caché .pwsm-words) : la même version du script sert en français et en anglais. Le calcul ne consulte aucune liste de mots de passe connus : « Motdepasse1! » obtient « Fort ». C'est un repère pour guider la saisie, pas une vérification de sécurité côté serveur.
Accessibilité
- Étiquette et remplissage : « Mot de passe » dans un
<label>masqué visuellement,autocomplete="new-password"pour que les gestionnaires proposent d'en générer un. - Verdict annoncé : le texte sous la barre est une zone
aria-live="polite"réécrite seulement quand le verdict change ; le champ y renvoie pararia-describedby. - Pas seulement la couleur : chaque niveau a sa longueur de barre et son mot ; la barre elle-même est
aria-hidden. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la barre change de longueur sans glisser. - Limite : le score ne dit pas quel critère manque. Gardez une phrase visible qui liste les règles (comme dans l'exemple de la banque).
Compatibilité navigateur
2 Ko de JavaScript, CSS à variables et sélecteurs d'attribut. Mesuré le 08/11/2026 dans Chromium, Firefox et WebKit (Playwright) : barre pleine et verte après un effacement complet puis une nouvelle saisie, deux copies indépendantes, toucher à 390 px, mouvement réduit, aucune erreur. Seuil fixé par NodeList.forEach (Chrome 51, Firefox 50, Safari 10, d'après @mdn/browser-compat-data).
Sans JavaScript, le champ mot de passe fonctionne normalement ; la barre reste vide et le texte « Force du mot de passe » ne change pas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0286-root">
<div class="pwsm-group" data-strength="empty">
<label class="pwsm-field">
<span class="pwsm-sr">Mot de passe</span>
<input class="pwsm-input" type="password" name="password" autocomplete="new-password" placeholder="Entrez un mot de passe">
</label>
<div class="pwsm-meter" aria-hidden="true">
<div class="pwsm-fill"></div>
</div>
<div class="pwsm-label" aria-live="polite">Force du mot de passe</div>
<span class="pwsm-words" hidden>
<span data-level="empty">Force du mot de passe</span>
<span data-level="weak">Faible</span>
<span data-level="medium">Moyen</span>
<span data-level="strong">Fort</span>
</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleurs des niveaux (CSS — --pwsm-weak, --pwsm-medium, --pwsm-strong sur .fx-0286-root) |
#ef4444 · #f59e0b · #10b981 | Sur fond blanc, assombrissez-les (#dc2626, #d97706, #059669) pour garder un texte lisible. |
Barre (CSS — --pwsm-bar-height, --pwsm-track) |
4px · blanc à 10 % | Épaisseur de la barre et couleur de son rail vide. |
Libellés (HTML — .pwsm-words) |
Force du mot de passe · Faible · Moyen · Fort | Traduisez ou reformulez ici (« Trop court », « Correct », « Excellent ») : le script relit ces textes à chaque changement. |
Champ (CSS — --pwsm-field, --pwsm-border, --pwsm-focus, --pwsm-text, --pwsm-muted) |
blanc à 5 % · blanc à 10 % · #6366f1 · #fff · #8b8b93 | --pwsm-muted colore le texte quand le champ est vide. |
Tailles (CSS — --pwsm-width, --pwsm-font-size, --pwsm-label-size) |
280px · 1rem · .75rem | La largeur est un maximum ; 100% suit le conteneur. Agrandissez le verdict pour un écran de présentation. |
Cadre de démonstration (CSS — --pwsm-bg, --pwsm-min-height) |
#0a0a0f · 300px | Dans un vrai formulaire : --pwsm-bg:transparent; --pwsm-min-height:0. |
Barème (JS — fonction score() et seuils dans update()) |
1 point par critère, Faible ≤ 2, Moyen = 3, Fort ≥ 4 | Pour exiger 12 caractères, remplacez pw.length >= 10 par pw.length >= 12. |
FAQ
form.addEventListener('submit', e => { if (group.dataset.strength !== 'strong') e.preventDefault(); }), où group est le .pwsm-group du champ. Refaites toujours la vérification côté serveur.score() et gardez l'affichage de l'effet.reset du formulaire, oui, automatiquement. Après une valeur posée par script (bouton « Générer », gestionnaire de mots de passe qui n'envoie pas d'événement), déclenchez input.dispatchEvent(new Event('input', {bubbles: true})) : la barre et le verdict se recalculent.
