Maison >interface Web >js tutoriel >vérification de la force du mot de passe js
J'ai travaillé sur un projet de pass récemment. 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 :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>密码强度</title>
<style type="text/css">
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
.strengthLv1{background:red;height:6px;width:40px;}
.strengthLv2{background:orange;height:6px;width:80px;}
.strengthLv3{background:green;height:6px;width:120px;}
</style>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div>
<em>密码强度：</em>
<div id="passStrength"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>Le code js est le suivant :
Copier le code
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 = ['','低','中','高'];
var lv = 0;
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];
};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).
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde s'abonnera au site Web PHP chinois.
Pour plus d'articles liés aux tests de force des mots de passe js, veuillez faire attention au site Web PHP chinois !