密码安全强度检测
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>密码强度</title>
<script type="text/javascript">
function checkPasswordStrength(password_id,strength_id,p){
if(typeof password_id != 'string' || null==(p=document.getElementById(password_id))) return;
var opt = {
rule: [/[ ]/,/[a-z]/,/[A-Z]/,/\d/,/[^A-Za-z0-9 ]/],
title: ['无','低','弱','中','强','高'],
color: ['#CCC','#F60','#F90','#FC0','#9C0','#090']
};
var pFn=p.getAttribute("passStrengthFn"), p_=strength_id, _this = this;
try{pFn=eval('('+pFn+')')}catch(e){}
if(typeof pFn !== 'function'){
if(typeof p_ != 'string' || null==(p_=document.getElementById(p_))){
p_ = document.createElement("div");
p_.id=password_id+'_security_check';
p.parentNode.insertBefore(p_,p.nextSibling);
with(p_.style){
height="5px";
width=p.offsetWidth+"px";
border="1px solid #ccc";
padding="0px";
}
}
p_.title='密码规则[空格、小写字母、大写字母、数字、特殊符号]:\n无: 不输入(风险大)\n低: 输入的密码位数少于6位(有风险)\n弱: 输入的密码由规则中的两种字符组成 或 输入的密码位数少于9位(易破解)\n中: 输入的密码由规则中的三种以上字符组成且位数少于12位(可以)\n强: 输入的密码由规则中的四种字符组成且位数大于等于12位(无风险)\n高: 输入的密码由规则中的五种字符组成且位数大于等于12位(不易破解)';
p_.innerHTML="";
opt.width=(p_.offsetWidth-2)/(opt.title.length-1);
opt.strength=p_;
if(pFn == '1'){
p_.style.height="18px";
for(var i = 0; i < opt.title.length-1; i++){
p_.insertAdjacentHTML('beforeEnd','<span style="float: left;width: '+(opt.width-2)+'px;font:12px;height: 18px;color: #fff;overflow: hidden;background: #ccc;margin-right: 2px;line-height: 20px;text-align: center;"></span>');
}
pFn=function(l){
this.oPassword.title=this.opt.title[l];
var childNode = this.opt.strength.children;
for(var i=0;i<childNode.length; i++) {
childNode[i].innerHTML=((i+1)==l?this.opt.title[l]:"");
childNode[i].style.background=((i+1)==l?this.opt.color[l]:"#CCC");
}
}
} else {
p_.insertBefore(document.createElement('div'));
pFn=function(l){
this.oPassword.title=this.opt.title[l];
with(this.opt.strength.children[0].style){
background=this.opt.color[l];
height='5px';
width=this.opt.width*l+"px";
}
}
}
}
opt.getSucerityLevel=function(v){
var l_=v.length,l=0;
for(var i in opt.rule)if(this.rule[i].test(v))l++;
l = l_==0?0:(l_<6?1:(l<3||l_<9?2:(l_<12?3:l)));
return l;
}
this.opt=opt;
this.oPassword=p;
this.callbackFn = pFn;
p.onkeyup = function(){
_this.callbackFn(_this.opt.getSucerityLevel(this.value),this.value,this,_this);
}
};
</script>
<style type="text/css">
.checkTips{margin:0px;font:12px/1.5 Arial;}
.checkTips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center;}
.checkTips .active1{background:#f30;}
.checkTips .active2{background:#fc0;}
.checkTips .active3{background:#cc0;}
.checkTips .active4{background:#9C0;}
.checkTips .active5{background:#090;}
</style>
</head>
<body>
<table>
<tr><th>默认</th><th>方格显示</th><th>自定义</th></tr>
<tr>
<td valign="top">
<input type="text" name="password" id="user_password" maxlength="32"/>
<input type="text" name="password" id="user_password1" maxlength="32"/>
<input type="text" name="password" id="user_password2" maxlength="32"/>
<input type="text" name="password" id="user_password3" maxlength="32"/>
<input type="text" name="password" id="user_password4" maxlength="32"/>
<input type="text" name="password" id="user_password5" maxlength="32"/>
</td>
<td valign="top">
<input type="text" name="password" id="user_password10" maxlength="32" passStrengthFn="1"/>
<input type="text" name="password" id="user_password11" maxlength="32" passStrengthFn="1"/>
<input type="text" name="password" id="user_password12" maxlength="32" passStrengthFn="1"/>
<input type="text" name="password" id="user_password13" maxlength="32" passStrengthFn="1"/>
<input type="text" name="password" id="user_password14" maxlength="32" passStrengthFn="1"/>
<input type="text" name="password" id="user_password15" maxlength="32" passStrengthFn="1"/>
</td>
<td valign="top">
<div>
<input type="text" name="password" id="user_password20" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div><div>
<input type="text" name="password" id="user_password21" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div><div>
<input type="text" name="password" id="user_password22" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div><div>
<input type="text" name="password" id="user_password23" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div><div>
<input type="text" name="password" id="user_password24" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div><div>
<input type="text" name="password" id="user_password25" maxlength="32" passStrengthFn="selfPassword"/>
<div class="checkTips"><span></span><span></span><span></span><span></span><span></span></div>
</div>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function selfPassword(l,v,p,o){
var div=p.nextSibling;
while(div.nodeType != 1){
div = div.nextSibling;
}
var childNode = div.children;
for(var i=0;i<childNode.length; i++) {
childNode[i].innerHTML=((i+1)==l?o.opt.title[l]:"");
childNode[i].className=((i+1)==l?("active"+l):"");
}
}
new checkPasswordStrength('user_password');
new checkPasswordStrength('user_password1');
new checkPasswordStrength('user_password2');
new checkPasswordStrength('user_password3');
new checkPasswordStrength('user_password4');
new checkPasswordStrength('user_password5');
//
new checkPasswordStrength('user_password10');
new checkPasswordStrength('user_password11');
new checkPasswordStrength('user_password12');
new checkPasswordStrength('user_password13');
new checkPasswordStrength('user_password14');
new checkPasswordStrength('user_password15');
//
new checkPasswordStrength('user_password20');
new checkPasswordStrength('user_password21');
new checkPasswordStrength('user_password22');
new checkPasswordStrength('user_password23');
new checkPasswordStrength('user_password24');
new checkPasswordStrength('user_password25');
</script>