JavaScript中怎么評估用戶輸入密碼的強(qiáng)度

這篇文章給大家介紹JavaScript中怎么評估用戶輸入密碼的強(qiáng)度，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有龍泉免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

原有代碼請查看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title> </head> <body>     <script type="text/javascript">         //CharMode函數(shù)   function CharMode(iN) {              if (iN >=48&& iN <=57) //數(shù)字  return1;              if (iN >=65&& iN <=90) //大寫字母  return2;              if (iN >=97&& iN <=122) //小寫  return4;              else                  return8; //特殊字符           }           //bitTotal函數(shù)   function bitTotal(num) {              modes =0;              for (i =0; i <4; i++) {                  if (num &1) modes++;                  num >>>=1;              }              return modes;          }           //checkStrong函數(shù)   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函數(shù)   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;              }          } </script>     <form name="form1" action="">     輸入密碼:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">     <br>     密碼強(qiáng)度:      <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"         height="23" style='display: inline'>         <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">                 強(qiáng)              </td>         </tr>     </table>     </form> </body> </html>

首先我們來改善一下上面博友的驗(yàn)證函數(shù)為如下代碼：

var PagePage = Page || {};  PagePage.Utility = Page.Utility || {};  PagePage.Utility.Registration = Page.Utility.Registration || {};   //獲取密碼強(qiáng)度  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函數(shù)       function CharMode(iN) {          if (iN >= 48 && iN <= 57) //數(shù)字              return 1;          if (iN >= 65 && iN <= 90) //大寫字母              return 2;          if (iN >= 97 && iN <= 122) //小寫              return 4;          else              return 8; //特殊字符       }       //bitTotal函數(shù)      function bitTotal(num) {          modes = 0;          for (i = 0; i < 4; i++) {              if (num & 1) modes++;              num >>>= 1;          }          return modes;      }  };

然后來創(chuàng)建View Model，但是引用Knockout之前，我們首先要引用Knockout的Js類庫（具體介紹請查看Knockout應(yīng)用開發(fā)指南的系列教程）
View model代碼如下：

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

對于密碼強(qiáng)度以及顏色的值依賴于密碼字符串的值，所以我們需要為他們聲明依賴屬性，代碼如下：

viewModel.PasswordLevel = ko.dependentObservable(function () {      return Page.Utility.Registration.getPasswordLevel(this.Password());  }, viewModel);   viewModel.Lcolor = ko.dependentObservable(function () {      //根據(jù)密碼強(qiáng)度判斷***個格顯示的背景色      return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))  }, viewModel);   viewModel.Mcolor = ko.dependentObservable(function () {      //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色      return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")  }, viewModel);   viewModel.Hcolor = ko.dependentObservable(function () {      //根據(jù)密碼強(qiáng)度判斷第三個格顯示的背景色      return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"  }, viewModel);

然后使用applyBindings方法將view model綁定到該頁面，你可以使用jQuery的ready函數(shù)來執(zhí)行該綁定代碼，也可以在頁面最下方執(zhí)行綁定代碼，我們這里使用了jQuery，代碼如下：

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

***，我們再看看這些值怎么動態(tài)綁定到HTML元素上的，請查看如下代碼（其中使用了afterkeydown代替了onKeyUp和onBlur）：

<form name="form1" action=""> 輸入密碼:  <input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> <br> 密碼強(qiáng)度:  <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"     height="23" style='display: inline'>     <tr align="center" bgcolor="#eeeeee">         <td width="50"data-bind="style: { backgroundColor: Lcolor }">弱</td>         <td width="50"data-bind="style: { backgroundColor: Mcolor }">中</td>         <td width="50"data-bind="style: { backgroundColor: Hcolor }">強(qiáng)</td>     </tr> </table> </form>

然后就OK，運(yùn)行代碼查看，一模一樣的功能展示出來了。

如果去掉為驗(yàn)證而改善的代碼，總代碼肯定是比原有的方式少的。

完整版代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>     <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>     <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script> </head> <body>     <script type="text/javascript">         var PagePage = Page || {};          PagePage.Utility = Page.Utility || {};          PagePage.Utility.Registration = Page.Utility.Registration || {};           //獲取密碼強(qiáng)度          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函數(shù)   function CharMode(iN) {                  if (iN >=48&& iN <=57) //數(shù)字  return1;                  if (iN >=65&& iN <=90) //大寫字母  return2;                  if (iN >=97&& iN <=122) //小寫  return4;                  else                      return8; //特殊字符               }               //bitTotal函數(shù)  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 () {              //根據(jù)密碼強(qiáng)度判斷***個格顯示的背景色  returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))          }, viewModel);           viewModel.Mcolor = ko.dependentObservable(function () {              //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色  returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")          }, viewModel);           viewModel.Hcolor = ko.dependentObservable(function () {              //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色  returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"          }, viewModel);           $((function () {              ko.applyBindings(viewModel);          }));                </script>     <form name="form1" action="">     輸入密碼:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">     <br>     密碼強(qiáng)度:      <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"         height="23" style='display: inline'>         <tr align="center" bgcolor="#eeeeee">             <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">                 弱              </td>             <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">                 中              </td>             <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">                 強(qiáng)              </td>         </tr>     </table>     </form> </body> </html>

關(guān)于JavaScript中怎么評估用戶輸入密碼的強(qiáng)度就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：JavaScript中怎么評估用戶輸入密碼的強(qiáng)度
文章鏈接：http://muchs.cn/article12/gddigc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、App設(shè)計(jì)、用戶體驗(yàn)、定制網(wǎng)站、網(wǎng)站營銷、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容