你的位置:首页 > Java教程

[Java教程]密码输入强度提示实例代码

密码输入强度提示实例代码:
现在众多的网站的注册表单,在填写密码的时候能够实时的给出密码强度提示,这可以提醒用户当前输入的密码安全程度,算是非常人性化的一个举措,下面就通过一个实例简单介绍一下如何实现此效果。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>密码强度提示功能-蚂蚁部落</title><script type="text/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<4;i++) {   if(num&1) modes++;   num>>>=1;  }  return modes; } 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); }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; } window.onload=function(){ var pw=document.getElementById("pw"); pw.onkeyup=function() {  pwStrength(this.value) } pw.onBlur=function() {  pwStrength(this.value) }}</script> </head> <body> <table width="250" cellpadding="2">  <tr>   <td width="40%" align="right">密码:</td>   <td colspan="3" align="left">    <input type="password" size="20" id="pw" />   </td>  </tr>  <tr align="center">   <td width="40%" align="right">密码强度:</td>   <td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td>   <td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td>   <td width="20%" id="strength_H" bgcolor="#f5f5f5">强</td>  </tr> </table> </body> </html> 

 

以上代码实现了我们的要求,当输入密码的时候,能够以颜色的形式实时提醒输入密码的强度,代码直接套用就可以了,有兴趣的朋友可以自行分析一下,如有任何问题,可以跟帖留言。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8922

更多内容可以参阅:http://www.softwhy.com/javascript/