Une barre de 3 niveau indique la puissance du mot de passe en cours de saisi.
Je me suis inspiré de l'apect graphique du password checker de Hotmail, cela dit, il n'en reprend aucun code.
Le premier niveau est atteint si le mot de passe contient 6 caractère (il est considéré comme faible).
Le deuxième niveau est passé si le mot de passe contient un ou des chiffres (il est considéré comme moyen).
Le dernier niveau est passé si le mot de passe contient des majuscules (il est considéré comme fort).
Une alternative permet aussi d'atteindre le niveau fort si le mot de passe contient soit 8 ou plus de caractères, ou encore s'il contient des caractères spéciaux.
Le code :
Entre <HEAD> et </HEAD> :
- Code: Tout sélectionner
<style type="text/css">
#weak, #medium
{
border-right:solid 1px #DEDEDE;
}
#sm
{
margin:0px;
padding:0px;
height:14px;
font-family:Tahoma, Arial, sans-serif;
font-size:9px;
}
#sm ul
{
border:0px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
#sm ul li
{
display:block;
float:left;
text-align:center;
padding:0px 0px 0px 0px;
margin:0px;
height:14px;
}
.nrm
{
width:84px;
color:#adadad;
text-align:center;
padding:2px;
background-color:#F1F1F1;
display:block;
vertical-align:middle;
}
.red
{
width:84px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#FF6F6F;
display:block;
vertical-align:middle;
}
.yellow
{
width:84px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#FDB14D;
display:block;
vertical-align:middle;
}
.green
{
width:84px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#A0DA54;
display:block;
vertical-align:middle;
}
</style>
<script type="text/javascript">
function evalPwd(s)
{
var cmpx = 0;
if (s.length >= 6)
{
cmpx++;
if (s.search("[A-Z]") != -1)
{
cmpx++;
}
if (s.search("[0-9]") != -1)
{
cmpx++;
}
if (s.length >= 8 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
{
cmpx++;
}
}
if (cmpx == 0)
{
document.getElementById("weak").className = "nrm";
document.getElementById("medium").className = "nrm";
document.getElementById("strong").className = "nrm";
}
else if (cmpx == 1)
{
document.getElementById("weak").className = "red";
document.getElementById("medium").className = "nrm";
document.getElementById("strong").className = "nrm";
}
else if (cmpx == 2)
{
document.getElementById("weak").className = "yellow";
document.getElementById("medium").className = "yellow";
document.getElementById("strong").className = "nrm";
}
else
{
document.getElementById("weak").className = "green";
document.getElementById("medium").className = "green";
document.getElementById("strong").className = "green";
}
}
</script>
Entre <BODY> et </BODY> :
- Code: Tout sélectionner
<form>
<input type="text" size="24" onkeyup="evalPwd(this.value);" /><br /><div id="sm"><ul><li id="weak" class="nrm">Faible</li><li id="medium" class="nrm">Moyen</li><li id="strong" class="nrm">Fort</li></ul></div>
</form>
