js怎么实现密码的强弱?

kjfengxing 2010-09-15 10:21:06

我看到很多网站都会根据你输入的密码来判断强弱..
我昨天用onchange事件试了一下结果不行.
有谁知道怎么做的？

...全文

533 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

MrSLin 2010-09-15

打赏
举报

试试这个



<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="">  

输入密码:<input type="password" size="20" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" />  

<br>密码强度:

<table width="200px" height="25" border="0" cellspacing="0" cellpadding="1" bordercolor="#cccccc" style='font-size:12px'>

<tr align="center" bgcolor="#eeeeee">

   <td width="33%" id="strength_L">弱</td>

   <td width="33%" id="strength_M">中</td>

   <td width="33%" id="strength_H">强</td>

</tr>

</table>

</form>

kjfengxing 2010-09-15

打赏
举报

#3不错，我再等等看..

root_lee 2010-09-15

打赏
举报

#2的方法很好

有一天呵呵 2010-09-15

打赏
举报

呵呵，刚把以前项目用的分离出来



<html>

	<head>

		<script type="text/javascript">

function checkstr(str)

{

 

 if(str>=48&&str<=57)//数字

 {

  return 1;

 }

 else if(str>=65&&str<=90)//大写字母

 {

  return 2;

 }

 else if(str>=97&&str<=122)//小写字母

 {

  return 3;

 }

 else//特殊字符

 {

  return 4;

 }

}

function checkl(string)

{

 n=false;

 s=false;

 t=false;

 l_num=0;

 if(string.length<6)

 {

  l_num=1;

 }

 else

 {

  for(i=0;i<string.length;i++)

  {

   asc=checkstr(string.charCodeAt(i));

   if(asc==1&&n==false){l_num+=1;n=true;}

   if((asc==2||asc==3)&&s==false){l_num+=1;s=true;}

   if(asc==4&&t==false){l_num+=1;t=true;}

  }

 }

 return l_num;

}



function checklevel(psw)

{

if(psw!=""){

 document.getElementById("pwdisok").style.display="block";

}else{

document.getElementById("pwdisok").style.display="none";

}

 color="#ededed";

 color_l="#ff0000";

 color_m="#ff9900";

 color_h="#33cc00";

 if(psw==null||psw=='')

 {

  lcor=color;

  mcor=color;

  hcor=color;

 }

 else

 {

 thelev=checkl(psw)

 switch(thelev)

  {

   case 1:

   lcor=color_l;

   hcor=mcor=color;

   break;

   case 2:

   mcor=lcor=color_m;

   hcor=color;

   break;

   case 3:

   hcor=mcor=lcor=color_h;

   break;

   default:

   lcor=mcor=hcor=color;

  }

 }

 document.getElementById("pwd_small").style.background=lcor;

 document.getElementById("pwd_center").style.background=mcor;

 document.getElementById("pwd_ok").style.background=hcor;

}

 



 function checksubmit(){

	   if(document.getElementById("pwd_small").style.background=="#ff0000"){

		alert("你的密码强度太弱,建议你用字母、数字、下划线、特殊字符组合密码!");

   }

 }





</script>

	</head>

	<body>

		<div id="qqpwd">

			设置密码 :  

			<input type="password" 

				onKeyUp="checklevel(this.value)" onBlur="checklevel(this.value)">

		</div>



		<div id="pwdisok" style="display: none;width:330px;">

			<!-- 密码强弱判断 -->

			<span id="pwd_small" style="width:100px;text-align:center;">弱</span>

			<span id="pwd_center" style="width:100px;text-align:center;">中</span>

			<span id="pwd_ok" style="width:100px;text-align:center;">强</span>

		</div>

         <br>

		<input type="button" value="提交" onclick="checksubmit()" />

	</body>

zxqiangwhere 2010-09-15

打赏
举报

//密码强度;
function PasswordStrength(showed){
this.showed = (typeof(showed) == "boolean")?showed:true;
this.styles = new Array();
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};

this.labels= ["弱","中","强"];

this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);
this.minLen = 5;

this.width = "300px";
this.height = "16px";

this.content = "";

this.selectedIndex = 0;

this.init();
}
PasswordStrength.prototype.init = function(){

var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">';
s += '<tr>';
for(var i=0;i<3;i++){
s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px"> </span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>';
}
s += '</tr>';
s += '</table>';
this.content = s;
if(this.showed){
document.write(s);
this.copyToStyle(this.selectedIndex);
}
}
PasswordStrength.prototype.copyToObject = function(o1,o2){
for(var i in o1){
o2[i] = o1[i];
}
}
PasswordStrength.prototype.copyToStyle = function(id){
this.selectedIndex = id;
for(var i=0;i<3;i++){
if(i == id-1){
this.$(this.divName+"_label_"+i).style.display = "inline";
}else{
this.$(this.divName+"_label_"+i).style.display = "none";
}
}
for(var i=0;i<id;i++){
this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);
}
for(;i<3;i++){
this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style);
}
}
PasswordStrength.prototype.$ = function(s){
return document.getElementById(s);
}
PasswordStrength.prototype.setSize = function(w,h){
document.getElementById(this.divName+"_table").style.width = w;
document.getElementById(this.divName+"_table").style.height = h;
//this.width = w;
//this.height = h;
}
PasswordStrength.prototype.setMinLength = function(n){
if(isNaN(n)){
return ;
}
n = Number(n);
if(n>1){
this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function(){
if(arguments.length == 0){
return ;
}
for(var i=0;i<arguments.length && i < 4;i++){
this.styles[i] = arguments[i];
}
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.write = function(s){
if(this.showed){
return ;
}
var n = (s == 'string') ? this.$(s) : s;
if(typeof(n) != "object"){
return ;
}
n.innerHTML = this.content;
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.update = function(s){
if(s.length < this.minLen){
this.copyToStyle(0);
return;
}
var ls = -1;
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--;
}
switch(ls) {
case 0:
this.copyToStyle(1);
break;
case 1:
this.copyToStyle(2);
break;
case 2:
this.copyToStyle(3);
break;
default:
this.copyToStyle(0);
}
}
//onkeyup中调用
<input id="pwd" runat="server" onkeyup="ps.update(this.value);" type="password"/>

具体的，楼主自己研究

带着爱远行 2010-09-15

打赏
举报

我也想知道啊，坐等答案

stoneJU 2010-09-15

打赏
举报

判断密码长度，是否只为数字或者字母

APM60- 2010-09-15

打赏
举报

http://topic.csdn.net/u/20070424/13/6bdee50a-cad6-455b-a6ec-653d025baa43.html
翻老帖，当年其中10楼的回复曾经让俺佩服不已，只用1条正则就把密码分了4个等级。

hoojo 2010-09-15

打赏
举报

ls的思路都不错，可以利用正则判断密码强度

css+js控制显示强度系数即可

验证密码强弱源码通过JS实现验证密码强弱的源码

JavaScript正则验证密码强弱度的实现方法　展示　设计　密码强弱度分析　密码由数字,字母,特殊符号组成　密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级：弱两两组合: 数字和字母, 数字和特殊...

C++语言应用的好坏，在面试中可以看出一个面试者的工程实践能力的强弱，两种语言的开发掌握好了可以使工作如虎添翼。 2、全模块讲解我出版了一本图书《学习OpenCV4：基于Python的算法实战》，虽然这本书是写的基于...

主要给大家介绍了关于JS利用正则表达式实现简单的密码强弱判断的相关资料，实现后的效果非常简单，但也挺实用的，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。

我们在填写表单的时候，特别是输入密码的时候，经常看到实时显示密码强度的效果，那么这种效果如何通过我们的原生js实现呢？思路: 1.密码通常是由数字，大写字母，小写字母以及特殊字符组成 2.密码全部是纯数字或者...

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章