`

密码强度检测

    博客分类：
  • js
JavaScriptCSSHTMLBBSBlog 
阅读更多

密码强度提示是最近流行的一个功能，但是99%的案例都忽略了检测机制。

基本上都是把字符分成四类：数字、小写英文、大写英文、符号，然后按照组合复杂度来直接判断强弱程度：

单一，是弱密码。
两两组合，是中密码。
超过两种组合，是强密码。

方案一

<SCRIPT language=javascript>     
   
    //CharMode函数     
    //测试某个字符是属于哪一类.     
    function CharMode(iN)    
    {     
        if (iN>=48 && iN <=57) //数字     
        return 1;     
        if (iN>=65 && iN <=90) //大写字母     
        return 2;     
        if (iN>=97 && iN <=122) //小写     
        return 4;     
        else     
        return 8; //特殊字符     
    }     
        
    //bitTotal函数     
    //计算出当前密码当中一共有多少种模式     
    function bitTotal(num)    
    {     
        modes=0;     
        for (i=0;i<4;i++)    
        {     
            if (num & 1) modes++;     
            num>>=1;     
        }     
        return modes;     
    }     
        
    //checkStrong函数     
    //返回密码的强度级别     
        
    function checkStrong(sPW)    
    {     
        if (sPW.length<=4)     
        return 0; //密码太短     
        Modes=0;     
        for (i=0;i<sPW.length;i++)    
        {     
            //测试每一个字符的类别并统计一共有多少种模式.     
            Modes|=CharMode(sPW.charCodeAt(i));     
        }     
        return bitTotal(Modes);     
    }     
        
    //pwStrength函数     
    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色     
        
    function pwStrength(pwd)    
    {     
        O_color="#eeeeee";     
        L_color="#FF0000";     
        M_color="#FF9900";     
        H_color="#33CC00";     
        if (pwd==null||pwd=="")    
        {     
            Lcolor=Mcolor=Hcolor=O_color;     
        }     
        else   
        {     
            S_level=checkStrong(pwd);     
            switch(S_level)    
            {     
                case 0:     
                Lcolor=Mcolor=Hcolor=O_color;     
                case 1:     
                Lcolor=L_color;     
                Mcolor=Hcolor=O_color;     
                break;     
                case 2:     
                Lcolor=Mcolor=M_color;     
                Hcolor=O_color;     
                break;     
                default:     
                Lcolor=Mcolor=Hcolor=H_color;     
            }     
        }     
        document.getElementById("strength_L").style.background=Lcolor;     
        document.getElementById("strength_M").style.background=Mcolor;     
        document.getElementById("strength_H").style.background=Hcolor;     
        return;     
    }     
   
</SCRIPT>     
   
    <FORM name="form1" action=""><P>     
    输入密码:</P><P>    
    <INPUT onblur=pwStrength(this.value) onkeyup=pwStrength(this.value) type=password size=10 value="">     
    <BR>    密码强度: </P><P>    
    <TABLE style="DISPLAY: inline" borderColor=#cccccc height=23 cellSpacing=0 cellPadding=1 width=217 border=1>
	<TBODY>
	<TR align=middle bgColor=#eeeeee>
	<TD id=strength_L width="33%">弱</TD>
	<TD id=strength_M width="33%">中</TD>
	<TD id=strength_H width="33%">强</TD>
	</TR>
	</TBODY>
	</TABLE>     
    </P><P> </P><P> </P></FORM>    
<PRE></PRE>

 

方案二

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码</title>
<script type="text/javascript">
	function chkpwd(obj){
		var t=obj.value;
		var id=getResult(t);
		
		//定义对应的消息提示
		var msg=new Array(4);
		msg[0]="密码过短";
		msg[1]="密码强度差";
		msg[2]="密码强度良好";
		msg[3]="密码强度高";
		
		var sty=new Array(4);
		sty[0]=-45;
		sty[1]=-30;
		sty[2]=-15;
		sty[3]=0;
		
		var col=new Array(4);
		col[0]="gray";
		col[1]="red";
		col[2]="#ff6600";
		col[3]="Green";
		
		//设置显示效果
		var bImg="http://bbs.blueidea.com/attachments/2006/12/7/pwdlen_dSIPeEGQWxfO.gif";//一张显示用的图片
		var sWidth=300;
		var sHeight=15;
		var Bobj=document.getElementById("chkResult");

		Bobj.style.fontSize="12px";
		Bobj.style.color=col[id];
		Bobj.style.width=sWidth + "px";
		Bobj.style.height=sHeight + "px";
		Bobj.style.lineHeight=sHeight + "px";
		Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
		Bobj.style.textIndent="20px";
		Bobj.innerHTML="检测提示：" + msg[id];
	}
	
	//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
	function getResult(s){
		if(s.length < 4){
			return 0;
		}
		var ls = 0;
		if (s.match(/[a-z]/ig)){
			ls++;
		}
		if (s.match(/[0-9]/ig)){
			ls++;
		}
	 	if (s.match(/(.[^a-z0-9])/ig)){
			ls++;
		}
		if (s.length < 6 && ls > 0){
			ls--;
		}
		return ls
	}
</script>
<style type="text/css">
body{
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
}
form{
	margin:2em;
}
#chkResult{margin-left:53px;height:15px;}
</style>

</head>

<body>
<form name="form1">
	<label for="pwd">用户密码</label>
	<input type="password" name="pwd" onblur="chkpwd(this)" />
	<div id="chkResult"></div>
	<label for="pwd2">重复密码</label>
	<input type="password" name="pwd2" />
</form>

</body>

</html>

 方案三 

<html>
	<body>
		<form id="myform">
			<h1>Password Strength Meter - Demo</h1> 
			<script type="text/javascript" s>
// Password strength meter v1.0
// Matthew R. Miller - 2007
// www.codeandcoffee.com
// Based off of code from  http://www.intelligent-web.co.uk

// Settings
// -- Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;

// Check password
function checkPassword(strPassword)
{
	// Reset combination count
	nCombinations = 0;
	
	// Check numbers
	if (bCheckNumbers)
	{
		strCheck = "0123456789";
		if (doesContain(strPassword, strCheck) > 0) 
		{ 
        		nCombinations += strCheck.length; 
    		}
	}
	
	// Check upper case
	if (bCheckUpperCase)
	{
		strCheck = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		if (doesContain(strPassword, strCheck) > 0) 
		{ 
        		nCombinations += strCheck.length; 
    		}
	}
	
	// Check lower case
	if (bCheckLowerCase)
	{
		strCheck = "abcdefghijklmnopqrstuvwxyz";
		if (doesContain(strPassword, strCheck) > 0) 
		{ 
        		nCombinations += strCheck.length; 
    		}
	}
	
	// Check punctuation
	if (bCheckPunctuation)
	{
		strCheck = ";:-_=+\|//?^&!.@$?*()%~<>{}[]";
		if (doesContain(strPassword, strCheck) > 0) 
		{ 
        		nCombinations += strCheck.length; 
    		}
	}
	
	// Calculate
	// -- 500 tries per second => minutes 
    	var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;
 
	// Number of days out of password lifetime setting
	var nPerc = nDays / nPasswordLifetime;
	
	return nPerc;
}
 
// Runs password through check and then updates GUI 
function runPassword(strPassword, strFieldID) 
{
	// Check password
	nPerc = checkPassword(strPassword);
	
	 // Get controls
    	var ctlBar = document.getElementById(strFieldID + "_bar"); 
    	var ctlText = document.getElementById(strFieldID + "_text");
    	if (!ctlBar || !ctlText)
    		return;
    	
    	// Set new width
    	var nRound = Math.round(nPerc * 100);
	if (nRound < (strPassword.length * 5)) 
	{ 
		nRound += strPassword.length * 5; 
	}
	if (nRound > 100)
		nRound = 100;
    	ctlBar.style.width = nRound + "%";
 
 	// Color and text
 	if (nRound > 95)
 	{
 		strText = "极佳";
 		strColor = "#3bce08";
 	}
 	else if (nRound > 75)
 	{
 		strText = "很好";
 		strColor = "orange";
	}
 	else if (nRound > 50)
 	{
 		strText = "一般";
 		strColor = "#ffd801";
 	}
 	else
 	{
 		strColor = "red";
 		strText = "极差";
 	}
	ctlBar.style.backgroundColor = strColor;
	ctlText.innerHTML = "<span style='color: " + strColor + ";'>" + strText + "</span>";
}
 
// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
 {
    	nCount = 0; 
 
	for (i = 0; i < strPassword.length; i++) 
	{
		if (strCheck.indexOf(strPassword.charAt(i)) > -1) 
		{ 
	        	nCount++; 
		} 
	} 
 
	return nCount; 
}



</script> 

			<b>Password:</b>
			<br /> 
			<input type="password" id="mypassword" name="mypassword" onkeyup="runPassword(this.value, 'mypassword');" />
			<br />
			<br />
			<b>Password Strength:</b>
			<br /> 
			<div style="width: 100px;"> 
				<div id="mypassword_text" style="font-size: 10px;"></div>
				<div id="mypassword_bar" style="font-size: 1px; height: 2px; width: 0px; border: 1px solid white;"></div> 
			</div>
		</form>
	</body>
</html>

 方案四 

<html>
<title>密码强度计算-www.codefans.net</title>
<head>
<style type="text/css">
<!--
.text {
	height: 16px;
	width: 160px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #F0F0F0;
	border-bottom-color: #F0F0F0;
	border-left-color: #999999;
}
.style1 {font-size: 12px}
.m {
	background-image: url(image/m.gif);
	background-repeat: no-repeat;
	height: 15px;
	width: 158px;
}
.r {
	background-image: url(image/r.gif);
	background-repeat: no-repeat;
	height: 15px;
	width: 158px;
}
.z {
	background-image: url(image/z.gif);
	background-repeat: no-repeat;
	height: 15px;
	width: 158px;
}
.q {
	background-image: url(image/q.gif);
	background-repeat: no-repeat;
	height: 15px;
	width: 158px;
}
.style5 {font-size: 12px; color: #FF0000; }
.style6 {font-size: 12px; color: #F1F1F1; }
.style7 {font-size: 12px; color: #F1F1F1; }
.style8 {font-size: 12px; color: green; }
.style9 {font-size: 12px; color: red; }
-->
</style>
</head>
<script language=javascript>
function CharMode(iN){
	if (iN>=48 && iN <=57) //数字
		return 1; 
	if (iN>=65 && iN <=90) //大写字母
		return 2;
	if (iN>=97 && iN <=122) //小写
		return 4;
	else
		return 8; //特殊字符
}
function bitTotal(num){
	modes=0;
	for (i=0;i<5;i++){
		if (num & 1) modes++;
		num>>>=1;
	}
	return modes;
}
function checkStrong(sPW){
	if (sPW.length<=5)
		return 0;  //密码太短
	Modes=0;
	for (i=0;i<sPW.length;i++){
		Modes|=CharMode(sPW.charCodeAt(i));
	}
	return bitTotal(Modes);	
}	
function pwStrength(pwd,vImg,vImgs,ilength){
	   if(pwd.length<=0){
	   		document.getElementById(vImgs).innerHTML="<span style=color:red;font-size:12px>"+16+"</span>";
	   }
	   else{ 
	   		document.getElementById(vImgs).innerHTML="<span style=color:red;font-size:12px>"+(16-pwd.length)+"</span>";
	   }
	if (pwd==null||pwd==''){
		document.getElementById(vImg).className="m";
		//document.getElementById(ilength).className="style6";
	}	
	else{
		S_level=checkStrong(pwd);
		switch(S_level){
			case 0:
				document.getElementById(vImg).className="m";
				//document.getElementById(ilength).className="style6";
				break;
			case 1:
				document.getElementById(vImg).className="r";
				//document.getElementById(ilength).className="style7";
				break;
			case 2:
				document.getElementById(vImg).className="z";
				//document.getElementById(ilength).className="style8";
				break;
			default:
				document.getElementById(vImg).className="q";
				//document.getElementById(ilength).className="style9";
		}
	}
	return;
}
</script>
<body>
<div align="center">
  <p>    <br>
  </p>
  <form name="form1" method="post" action="">
    <table width="240" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="69" height="24">
        <div align="right" class="style1">密&nbsp;&nbsp;&nbsp; 码：</div></td>
        <td width="171"><div align="center">
          <input name="str1" type="password" class="text" onKeyUp="pwStrength(this.value,'img','imgs','ilength')" value="" maxlength="16" >
        </div></td>
      </tr>
      <tr>
        <td height="24">
        <div align="right" class="style1">密码强度：</div></td>
        <td height="19"><div align="center">
          <table width="160" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" valign="middle" class="m" id="img">
                    <table width="90%"  border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="46%"><div align="right" class="style6" id="ilength"></div></td>
                        <td width="14%">&nbsp;</td>
                        <td width="40%" id="imgs"><span class="style5">16</span></td>
                      </tr>
                </table></td>
              </tr>
          </table>
        </div></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

 

来自：http://lqw.iteye.com/blog/337770 

分享到：
| struts2 tree 标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery密码强度检测代码

    `jQuery`是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务，同时也方便了我们在前端实现密码强度检测功能。本篇文章将深入探讨如何利用jQuery实现一个密码强度检测的代码。 首先，我们...

    漂亮的jsp密码强度检测

    jsp密码强度检测jsp密码强度检测jsp密码强度检测

    jquery 密码强度检测

    《jQuery密码强度检测详解》 在Web开发中，用户账户的安全性是至关重要的，而密码强度检测则是确保安全的重要一环。jQuery，作为一款轻量级的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本文将深入...

    密码强度检测（jquery）.rar

    标题中的“密码强度检测（jquery）.rar”表明这是一个基于jQuery的密码强度检测工具的压缩包文件。在网页开发中，密码强度检测是确保用户创建安全密码的重要环节，它可以指导用户创建复杂度足够、不易被猜解的密码，...

    jQuery密码强度检测.rar

    jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度检测.rar jQuery密码强度...

    密码强度检测代码

    密码强度检测代码通常用于帮助用户创建足够复杂且难以被破解的密码，从而提高系统的安全性。下面将详细介绍密码强度检测的一些核心概念、常用方法以及相关的编程实现。 1. **密码强度的衡量标准** - **长度**：...

    jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果

    本文将详细讲解如何使用jQuery实现密码强度检测，包括密码强度验证、正则表达式代码以及相关的动画效果。 首先，密码强度检测的核心在于设计一套合理的规则来评估用户输入的密码是否足够强大。通常，我们会根据以下...

    Jquery插件之密码强度检测：passwordStrength

    Jquery插件之密码强度检测：passwordStrength

    实用密码强度检测jQuery插件

    passwordRulesHelper.js是一款非常实用的密码强度检测jQuery插件。该插件内置5种密码强度规则，例如密码中必须包含大写字母和数字等。你也可以自定义自己的密码强度规则。

    jQuery密码强度检测代码.zip

    jQuery密码强度检测代码基于jquery.1.7.2.min.js插件制作，密码小于六位的时候，密码强度图片都为灰色；密码为八位及以上并且字母数字特殊字符三项都包括,强度最强；密码为七位及以上并且字母、数字、特殊字符三项中...

    JavaScript密码强度检测

    JavaScript密码强度检测JavaScript密码强度检测

    实用密码强度检测jQuery插件特效.zip

    【密码强度检测jQuery插件——passwordRulesHelper.js详解】 在网络安全日益重要的今天，密码强度的检测成为用户账户安全的关键一环。"实用密码强度检测jQuery插件特效.zip"中的主角，`passwordRulesHelper.js`，...

    ASP+Ajax会员注册实例 密码强度检测【免费下载】

    2. **密码强度检测**：密码强度检测是用户安全的重要组成部分。通常，强密码应该包含大小写字母、数字和特殊字符的组合，长度足够。在这个实例中，JavaScript会在客户端评估用户输入的密码强度，并根据预设的规则...

    Python 实现密码强度检测器.pdf

    Python 实现密码强度检测器 本教程将带领大家编写一个简单的 Python 库——密码强度检测器，以检测密码的强度。本教程将详细介绍密码强度检测器的设计、实现和测试。 1.1 课程简介 密码强度检测器是一个简单的 ...

    jquery密码强度检测_密码强度验证_密码强度正则表达式代码

    jQuery是一款广泛使用的JavaScript库，它提供了丰富的功能和简洁的API，使得在前端实现密码强度检测变得简单易行。本篇文章将深入探讨如何利用jQuery进行密码强度检测，以及密码强度验证的正则表达式代码实现。 ...

    基于ext的密码强度检测.

    本文将深入探讨如何使用基于ExtJS的扩展组件（Ext.ux）实现密码强度检测，以及如何通过颜色变化（从红色到绿色）为用户提供直观的反馈。 首先，ExtJS提供了一个强大的组件模型，允许开发者构建复杂的用户界面。"Ext...

    密码强度检测器

    这是一个检测密码强度的软件，免费破解版（仅限个人使用）。

Magicbox
Global site tag (gtag.js) - Google Analytics