Javascript密码输入强度提示实例代码

很多网站的注册表单，在填写密码的时候能够实时的给出密码强度提示，这可以提醒用户当前输入的密码安全程度。

算是非常人性化的一个举措，下面就通过一个实例简单介绍一下如何实现此效果。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>密码强度提示功能-51前端</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>

代码描述：Javascript 密码强度提示。Javascript密码输入强度提示实例代码

下载全部收藏

186 248

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册