Exigences du mot de passe en direct
Au focus du champ, une infobulle affiche une jauge de robustesse et des règles qui se cochent pendant la saisie.
Réglages
Code
<div class="uvq08-pwd"><label for="uvq08-pwd-i">Nouveau mot de passe</label><span class="fw pk"><input id="uvq08-pwd-i" type="password" autocomplete="new-password" spellcheck="false" aria-describedby="uvq08-pwd-t"><button type="button" class="ey" aria-label="Afficher le mot de passe" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="ou" d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle class="ou" cx="12" cy="12" r="3"/><path class="x" d="M4 4l16 16"/></svg></button><span class="tt" role="tooltip" id="uvq08-pwd-t" data-l="0"><span class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="lv"><span>Commence à écrire</span><span>Faible</span><span>Correct</span><span>Bon</span><span>Fort</span></span><span class="ru" data-r="len"><i aria-hidden="true"></i>8 caractères ou plus</span><span class="ru" data-r="up"><i aria-hidden="true"></i>Une majuscule</span><span class="ru" data-r="num"><i aria-hidden="true"></i>Un chiffre</span><span class="ru" data-r="sym"><i aria-hidden="true"></i>Un symbole</span></span></span></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Un champ de mot de passe dont l’infobulle apparaît au focus ou au survol, avec une jauge de robustesse en quatre segments, un libellé de niveau et quatre règles pour la longueur, la majuscule, le chiffre et le symbole. Chaque règle reçoit une coche animée dès qu’elle est remplie, et le champ est relié à l’infobulle avec aria-describedby. Un bouton en forme d’œil affiche ou masque le texte.
La couleur principale signale un mot de passe solide et les règles validées, la secondaire le niveau intermédiaire. Adapte les expressions régulières du script à ta propre politique et garde quatre ou cinq règles claires, utiles à l’inscription comme aux réglages de compte.