密码显示强弱

标签：cti   var   输入密码   style   事件   round   text   element   break   

1 分别将div 包裹三个小的div

<div id="mainPwdStatus" class="padding-none register-form-input-psw-poor">
    <div class="s1" id="strength_L" style="width: 26px; height: 22px;">弱</div>
    <div class="s2" id="strength_M" style="width: 26px; height: 22px;">中</div>
    <div class="s3" id="strength_H" style="width: 26px; height: 22px;">强</div>
</div>

2 调整css布局和样式 （看自己的需求去调整）

.register-form-input-psw-poor {
  border: solid 1px #C0C0C0;
  float: right;
  width: 78px;
  height: 24px;
  margin-top: -24px;
  padding-top: 0px;
  padding-left: 0px;
   .s1 {
     float: right;
     margin-right: 50px;
     margin-top: 0px;
     text-align: center;
     line-height: 25px;
   }
   .s2 {
     float: right;
     margin-top: -22px;
     margin-right: 26px;
     text-align: center;
     line-height: 25px;
  }
   .s3 {
    float: right;
     margin-right: 0px;
     margin-top: -22px;
     text-align: center;
     line-height: 25px;
  }
}

3js 验证密码规则

 //密码强度
$("#newPassword").keyup(function () {
    pwdSor(this.value);
});
 //失去光标事件
 $("#newPassword").blur(function () {
     pwdSor(this.value);
 })
 function pwdSor(pwd) {
     O_color = "#ffffff";
     L_color = "#FF0000";
     M_color = "#FF9900";
     H_color = "#33CC00";
     var level = 0, strength = "O";
     var hasNum = 0;
     var hasLower = 0;
     var hasUper = 0;
     var hasSymbol = 0;
     if (pwd == null || pwd == ‘‘) {
         strength = "O";
         Lcolor = Mcolor = Hcolor = O_color;
     } else {
         var mode = 0;
         if (pwd.length <= 5) {
             mode = 0;
         } else {
             for (i = 0; i < pwd.length; i++) {
                 var charCode;
                 charCode = pwd.charCodeAt(i);
                 // 判断输入密码的类型
                 if (charCode >= 48 && charCode <= 57) //数字
                     hasNum = 1;
                 else if (charCode >= 65 && charCode <= 90) //大写
                     hasUper = 1;
                 else if (charCode >= 97 && charCode <= 122) //小写
                     hasLower = 1;
                 else
                     hasSymbol = 1;
             }
             if (hasSymbol == 1 && hasUper == 1 && hasNum == 1 && hasLower == 1) {
                 //强
                 level = 8;
             } else if (hasUper + hasLower == 2 && hasNum == 1) {
                 level = 2;
             } else if (hasUper + hasLower == 1 && hasLower + hasUper == 1 && hasNum == 1 && hasSymbol == 0 && pwd.length >= 6) {
                 level = 1;
             } else {
                 level = 0;
             }
         }

     }
     switch (level) {
         case 0:
             strength = "O";
             Lcolor = Mcolor = Hcolor = O_color;
             break;
         case 1:
             strength = "L";
             Lcolor = L_color;
             Mcolor = Hcolor = O_color;
             break;
         case 2:
             strength = "M";
             Lcolor = Mcolor = M_color;
             Hcolor = O_color;
             break;
         default:
             strength = "H";
             Lcolor = Mcolor = Hcolor = H_color;
             break;
     }
     document.getElementById("strength_L").style.background = Lcolor;
     document.getElementById("strength_M").style.background = Mcolor;
     document.getElementById("strength_H").style.background = Hcolor;
     return strength;
 }
做的很lower，还是在别人指点下。上效果图

密码规则可以自己定义。
希望大家工作愉快！

密码显示强弱

标签：cti   var   输入密码   style   事件   round   text   element   break   

原文地址：http://www.cnblogs.com/yfx--/p/7573398.html