JavaScript中怎么评估用户输入密码的强度

这篇文章给大家介绍JavaScript中怎么评估用户输入密码的强度，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

10年积累的成都做网站、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有龙泉免费网站建设让你可以放心的选择与我们合作。

原有代码请查看：

                       //CharMode函数   function CharMode(iN) {              if (iN >=48&& iN <=57) //数字  return1;              if (iN >=65&& iN <=90) //大写字母  return2;              if (iN >=97&& iN <=122) //小写  return4;              else                  return8; //特殊字符           }           //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)                  return0; //密码太短              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) {                      case0:                          Lcolor = Mcolor = Hcolor = O_color;                      case1:                          Lcolor = L_color;                          Mcolor = Hcolor = O_color;                          break;                      case2:                          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;              }          }           输入密码:     
     密码强度:                                             弱                                            中                                            强                                   

首先我们来改善一下上面博友的验证函数为如下代码：

var PagePage = Page || {};  PagePage.Utility = Page.Utility || {};  PagePage.Utility.Registration = Page.Utility.Registration || {};   //获取密码强度  Page.Utility.Registration.getPasswordLevel = function (password) {      if (password == null || password == '')          return 0;       if (password.length <= 4)          return 0; //密码太短       var Modes = 0;      for (i = 0; i < password.length; i++) {          Modes |= CharMode(password.charCodeAt(i));      }      return bitTotal(Modes);       //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;      }  };

然后来创建View Model，但是引用Knockout之前，我们首先要引用Knockout的Js类库（具体介绍请查看Knockout应用开发指南的系列教程）
View model代码如下：

var viewModel = {      Password: ko.observable(""),      Ocolor: "#eeeeee"  };

对于密码强度以及颜色的值依赖于密码字符串的值，所以我们需要为他们声明依赖属性，代码如下：

viewModel.PasswordLevel = ko.dependentObservable(function () {      return Page.Utility.Registration.getPasswordLevel(this.Password());  }, viewModel);   viewModel.Lcolor = ko.dependentObservable(function () {      //根据密码强度判断***个格显示的背景色      return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))  }, viewModel);   viewModel.Mcolor = ko.dependentObservable(function () {      //根据密码强度判断第二个格显示的背景色      return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")  }, viewModel);   viewModel.Hcolor = ko.dependentObservable(function () {      //根据密码强度判断第三个格显示的背景色      return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"  }, viewModel);

然后使用applyBindings方法将view model绑定到该页面，你可以使用jQuery的ready函数来执行该绑定代码，也可以在页面最下方执行绑定代码，我们这里使用了jQuery，代码如下：

$((function () {      ko.applyBindings(viewModel);  }));

***，我们再看看这些值怎么动态绑定到HTML元素上的，请查看如下代码（其中使用了afterkeydown代替了onKeyUp和onBlur）：

 输入密码:   
 密码强度:                弱         中         强       

然后就OK，运行代码查看，一模一样的功能展示出来了。

如果去掉为验证而改善的代码，总代码肯定是比原有的方式少的。

完整版代码如下：

                                 var PagePage = Page || {};          PagePage.Utility = Page.Utility || {};          PagePage.Utility.Registration = Page.Utility.Registration || {};           //获取密码强度          Page.Utility.Registration.getPasswordLevel =function (password) {              if (password ==null|| password =='')                  return0;               if (password.length <=4)                  return0; //密码太短               var Modes =0;              for (i =0; i < password.length; i++) {                  Modes |= CharMode(password.charCodeAt(i));              }              return bitTotal(Modes);               //CharMode函数   function CharMode(iN) {                  if (iN >=48&& iN <=57) //数字  return1;                  if (iN >=65&& iN <=90) //大写字母  return2;                  if (iN >=97&& iN <=122) //小写  return4;                  else                      return8; //特殊字符               }               //bitTotal函数  function bitTotal(num) {                  modes =0;                  for (i =0; i <4; i++) {                      if (num &1) modes++;                      num >>>=1;                  }                  return modes;              }          };           var viewModel = {              Password: ko.observable(""),              Ocolor: "#eeeeee"          };           viewModel.PasswordLevel = ko.dependentObservable(function () {              return Page.Utility.Registration.getPasswordLevel(this.Password());          }, viewModel);           viewModel.Lcolor = ko.dependentObservable(function () {              //根据密码强度判断***个格显示的背景色  returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))          }, viewModel);           viewModel.Mcolor = ko.dependentObservable(function () {              //根据密码强度判断第二个格显示的背景色  returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")          }, viewModel);           viewModel.Hcolor = ko.dependentObservable(function () {              //根据密码强度判断第二个格显示的背景色  returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"          }, viewModel);           $((function () {              ko.applyBindings(viewModel);          }));                          输入密码:     
     密码强度:                                             弱                                            中                                            强                                   

关于JavaScript中怎么评估用户输入密码的强度就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网站栏目：JavaScript中怎么评估用户输入密码的强度
URL分享：http://shouzuofang.com/article/gddigc.html