Js check password strength of low medium and high attached figure
- 2020-03-30 03:14:19
- OfStack
Recently, I have been working on the pass project, where the password strength (low, medium and high) needs to be displayed when entering the password in the registration module. Today to do the effect to share with you, the code is not as complex as the Internet search, can meet the general needs.
The HTML code is as follows:
Js code is as follows:
Effect:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201406/20140605172346.png? 201455172425 ">
Instructions:
1. The first parameter of the object is the id of the password input box, and the second parameter is the id of the password strength bar.
2. Rules for customizing password strength in the checkStrength method.
3, low password strength showed high corresponding to three CSS style (strengthLv1 strengthLv2 strengthLv3).
The HTML code is as follows:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Password strength </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 class="pass-wrap">
<em> Password strength: </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>
Js code is as follows:
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 = ['',' low ',' In the ',' high '];
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];
};
Effect:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201406/20140605172346.png? 201455172425 ">
Instructions:
1. The first parameter of the object is the id of the password input box, and the second parameter is the id of the password strength bar.
2. Rules for customizing password strength in the checkStrength method.
3, low password strength showed high corresponding to three CSS style (strengthLv1 strengthLv2 strengthLv3).