密码安全强度检测

最新推荐文章于 2024-06-03 10:35:55 发布

maci_hotesion

最新推荐文章于 2024-06-03 10:35:55 发布

阅读量897

点赞数

分类专栏：我的技术文档我的文章文章标签： javascript 密码安全强度检测

本文链接：https://blog.csdn.net/maci_hotesion/article/details/50557657

版权

我的技术文档同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

我的文章

9 篇文章 0 订阅

订阅专栏

密码安全强度检测

<!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>

maci_hotesion

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
密码安全强度检测

密码安全强度检测密码强度 function checkPasswordStrength(password_id,strength_id,p){ if(typeof password_id != 'string' || null==(p=document.getElementById(password_id))) return; var opt = {
复制链接

扫一扫