网站注册时候,密码强弱性通常需要前端进行判断。整理判断密码强弱的两种方法,仅作为记录:
第一种:
<!DOCTYPE HTML>
<html lang="en">
<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 class="pass-wrap">
<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>
JS则可以简单判断,密码类型及长度,以下仅供参考:
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];
};
这是一种简单的js判断,可以满足简单的业务功能。
第二种:利用正则判断密码的强弱
<!doctype html>
<html>
<head>
<meta charset=
"utf-"
>
<title>js密码强度</title>
<style type=
"text/css"
>
.pw_letter{ margin-top:px; font-size: px; }
.pw_letter label{float: left; margin-right:px; cursor:
default
; font-size: px; line-height: px;;}
.pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:
#FFF; background-color:#ccc; border-left: px solid #FFF;}
.pw_letter span.pw_strength_color{ background-color:green;}
</style>
</head>
<body>
<input id=
"password"
type=
"password"
name=
"password"
placeholder=
"密码"
onKeyUp=
"setPasswordStrength(this.value.trim())"
>
<div class=
"pw_letter"
><label>安全程度</label> <span class=
"strength"
>弱</span> <span class=
"strength"
>中</span> <span class=
"strength"
>强</span> </div>
<script type=
"text/javascript"
>
/*
*密码安全程度
*return :全部为字母或者数字,或者密码长度小于
*return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符
*return : 字母和数字和特殊字符
*/
String.prototype.passwordStrength=
function
(){
if
(
this
.length> &&
this
.length<=)
return
;
var
n = (
this
.search(/[a-zA-Z]/) != -) ? : ,
n = (
this
.search(/[-]/) != -) ? : ,
n =(
this
.search(/[\~\`\!\@\
#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ;
return
n+n+n;
}
String.prototype.trim = String.prototype.trim ||
function
(){
return
this
.replace(/^\s+|\s+$/g,"
");
}
function setPasswordStrength(pwd){
var strength_span = document.getElementsByClassName("
strength
");
for(var i=; i<strength_span.length; i++){
strength_span.item(i).className="
strength
";
}
for(var i=; i<pwd.passwordStrength(); i++){
document.getElementsByClassName("
strength
").item(i).className="
strength pw_strength_color";
}
}
</script>
</body>