Créons dans un premier temps un simple formulaire avec un champ texte.

<form>
<input type="text" id="pwd" onkeyup="password_complexity(this.value);" />
</form>

J'ai associé l'événement "onkeyup" (lorsqu'on relâche une touche du clavier) à une fonction "password_complexity" qui fera l'essentiel du travail de vérification. Le paramètre "this.value" désigne la valeur spécifiée à l'intérieur du champ texte.

PS: Dans la pratique, vous changerez bien sûr <input type="text" /> par <input type="password" /> :D.

Voici la fonction "password_complexity" ci-dessous.

function password_complexity(myPassword)
{
var myPassword = document.getElementById('pwd');
var myRegex = new RegExp("^(?=.*[a-z]+)(?=.*[A-Z]+)(?=.*[0-9]+)([^\\s]{6,})$", "g");
if(myPassword.value.match(myRegex)){
myPassword.style.backgroundColor = "green";
} else {
myPassword.style.backgroundColor = "red";
}
}

Rien de bien compliqué: si le mot de passe respecte les règles de complexité, le fond du champ texte sera vert, sinon il sera rouge. Le plus intéressant ici est cette règle de complexité (que j'ai honteusement pompé ici :D). Cette règle, matérialisée par une expression régulière et que j'ai fixée arbitrairement dit que le mot de passe doit contenir au moins 6 caractères, dont au moins un caractère minuscule + un caractère majuscule + un chiffre, mais ne doit pas contenir d'espace. Cette expression régulière un peu spéciale (que je ne connaissais pas jusqu'à présent), c'est le "Lookahead". Pour plus d'informations, c'est par ici. Pour la démo, c'est par .