js teste la force du mot de passe (faible, moyenne et élevée) avec des compétences en images_javascript

J'ai récemment travaillé sur un projet de pass. Lors de la saisie d'un mot de passe dans le module d'inscription, la force du mot de passe (faible, moyenne, élevée) doit être affichée. Aujourd'hui, je vais partager avec vous les résultats. Le code n'est pas aussi compliqué que la recherche en ligne et peut répondre à des besoins généraux.

le code HTML est le suivant :

Copier le code le code est le suivant :

< !DOCTYPE HTML>

;Force du mot de passe< ;/title>

Force du mot de passe :

Le code js est le suivant :

Copier le code

Le code est le suivant : function PasswordStrength(passwordID,strengthID ){ this.init(strengthID);

var _this = this;

document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength( this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement); ('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong) ;
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','faible','moyen','élevé']; ;
if(val .match(/[a-z]/g)){lv ;}
if(val.match(/[0-9]/g)){lv ;}
if( val.match(/(. [^a-z0-9])/g)){lv ;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3; }
this.oStrength.className = 'strengthLv' lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv]
}


; Rendu :


Instructions d'utilisation :

1. Le premier paramètre de l'objet est l'identifiant de la zone de saisie du mot de passe, et le deuxième paramètre est l'identifiant de la barre de force du mot de passe. .
2. Les règles de force du mot de passe peuvent être personnalisées dans la méthode checkStrength.

3. La force du mot de passe affiche faible, moyenne et élevée correspondant à 3 styles CSS (forceLv1, forceLv2, forceLv3).