自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用JavaScript評(píng)估用戶輸入密碼的強(qiáng)度（Knockout版）

作者：湯姆大叔
開發(fā) 前端
使用Knockout更簡(jiǎn)單的來(lái)實(shí)現(xiàn)密碼強(qiáng)度的驗(yàn)證。

早上看到博友6點(diǎn)多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章（連接），甚是感動(dòng)（周末大早上還來(lái)發(fā)文）。

我們來(lái)看看如果使用Knockout更簡(jiǎn)單的來(lái)實(shí)現(xiàn)密碼強(qiáng)度的驗(yàn)證。

原有代碼請(qǐng)查看：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title></title> 
  5. </head> 
  6. <body> 
  7.     <script type="text/javascript"> 
  8.         //CharMode函數(shù)   
  9. function CharMode(iN) {  
  10.             if (iN >=48&& iN <=57) //數(shù)字  
  11. return1;  
  12.             if (iN >=65&& iN <=90) //大寫字母  
  13. return2;  
  14.             if (iN >=97&& iN <=122) //小寫  
  15. return4;  
  16.             else  
  17.                 return8; //特殊字符   
  18.         }  
  19.  
  20.         //bitTotal函數(shù)   
  21. function bitTotal(num) {  
  22.             modes =0;  
  23.             for (i =0; i <4; i++) {  
  24.                 if (num &1) modes++;  
  25.                 num >>>=1;  
  26.             }  
  27.             return modes;  
  28.         }  
  29.  
  30.         //checkStrong函數(shù)   
  31. function checkStrong(sPW) {  
  32.             if (sPW.length <=4)  
  33.                 return0; //密碼太短  
  34.             Modes =0;  
  35.             for (i =0; i < sPW.length; i++) {  
  36.                 Modes |= CharMode(sPW.charCodeAt(i));  
  37.             }  
  38.             return bitTotal(Modes);  
  39.         }  
  40.  
  41.  
  42.         //pwStrength函數(shù)   
  43. function pwStrength(pwd) {  
  44.             O_color ="#eeeeee";  
  45.             L_color ="#FF0000";  
  46.             M_color ="#FF9900";  
  47.             H_color ="#33CC00";  
  48.             if (pwd ==null|| pwd =='') {  
  49.                 Lcolor = Mcolor = Hcolor = O_color;  
  50.             } else {  
  51.                 S_level = checkStrong(pwd);  
  52.                 switch (S_level) {  
  53.                     case0:  
  54.                         Lcolor = Mcolor = Hcolor = O_color;  
  55.                     case1:  
  56.                         Lcolor = L_color;  
  57.                         Mcolor = Hcolor = O_color;  
  58.                         break;  
  59.                     case2:  
  60.                         Lcolor = Mcolor = M_color;  
  61.                         Hcolor = O_color;  
  62.                         break;  
  63.                     default:  
  64.                         Lcolor = Mcolor = Hcolor = H_color;  
  65.                 }  
  66.  
  67.                 document.getElementById("strength_L").style.background = Lcolor;  
  68.                 document.getElementById("strength_M").style.background = Mcolor;  
  69.                 document.getElementById("strength_H").style.background = Hcolor;  
  70.                 return;  
  71.             }  
  72.         } </script> 
  73.     <form name="form1" action=""> 
  74.     輸入密碼:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> 
  75.     <br> 
  76.     密碼強(qiáng)度:  
  77.     <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
  78.         height="23" style='display: inline'> 
  79.         <tr align="center" bgcolor="#eeeeee"> 
  80.             <td width="33%" id="strength_L"> 
  81.                 弱  
  82.             </td> 
  83.             <td width="33%" id="strength_M"> 
  84.                 中  
  85.             </td> 
  86.             <td width="33%" id="strength_H"> 
  87.                 強(qiáng)  
  88.             </td> 
  89.         </tr> 
  90.     </table> 
  91.     </form> 
  92. </body> 
  93. </html> 

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

  1. var PagePage = Page || {};  
  2. PagePage.Utility = Page.Utility || {};  
  3. PagePage.Utility.Registration = Page.Utility.Registration || {};  
  4.  
  5. //獲取密碼強(qiáng)度  
  6. Page.Utility.Registration.getPasswordLevel = function (password) {  
  7.     if (password == null || password == '')  
  8.         return 0;  
  9.  
  10.     if (password.length <= 4)  
  11.         return 0; //密碼太短  
  12.  
  13.     var Modes = 0;  
  14.     for (i = 0; i < password.length; i++) {  
  15.         Modes |= CharMode(password.charCodeAt(i));  
  16.     }  
  17.     return bitTotal(Modes);  
  18.  
  19.     //CharMode函數(shù)   
  20.     function CharMode(iN) {  
  21.         if (iN >= 48 && iN <= 57) //數(shù)字  
  22.             return 1;  
  23.         if (iN >= 65 && iN <= 90) //大寫字母  
  24.             return 2;  
  25.         if (iN >= 97 && iN <= 122) //小寫  
  26.             return 4;  
  27.         else  
  28.             return 8; //特殊字符   
  29.     }  
  30.  
  31.     //bitTotal函數(shù)  
  32.     function bitTotal(num) {  
  33.         modes = 0;  
  34.         for (i = 0; i < 4; i++) {  
  35.             if (num & 1) modes++;  
  36.             num >>>= 1;  
  37.         }  
  38.         return modes;  
  39.     }  
  40. }; 

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

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

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

  1. viewModel.PasswordLevel = ko.dependentObservable(function () {  
  2.     return Page.Utility.Registration.getPasswordLevel(this.Password());  
  3. }, viewModel);  
  4.  
  5. viewModel.Lcolor = ko.dependentObservable(function () {  
  6.     //根據(jù)密碼強(qiáng)度判斷***個(gè)格顯示的背景色  
  7.     return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))  
  8. }, viewModel);  
  9.  
  10. viewModel.Mcolor = ko.dependentObservable(function () {  
  11.     //根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色  
  12.     return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")  
  13. }, viewModel);  
  14.  
  15. viewModel.Hcolor = ko.dependentObservable(function () {  
  16.     //根據(jù)密碼強(qiáng)度判斷第三個(gè)格顯示的背景色  
  17.     return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"  
  18. }, viewModel); 

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

  1. $((function () {  
  2.     ko.applyBindings(viewModel);  
  3. })); 

***，我們?cè)倏纯催@些值怎么動(dòng)態(tài)綁定到HTML元素上的，請(qǐng)查看如下代碼（其中使用了afterkeydown代替了onKeyUp和onBlur）：

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

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

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

 

完整版代碼如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head> 
  4.     <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script> 
  5.     <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script> 
  6.     <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script> 
  7. </head> 
  8. <body> 
  9.     <script type="text/javascript"> 
  10.         var PagePage = Page || {};  
  11.         PagePage.Utility = Page.Utility || {};  
  12.         PagePage.Utility.Registration = Page.Utility.Registration || {};  
  13.  
  14.         //獲取密碼強(qiáng)度  
  15.         Page.Utility.Registration.getPasswordLevel =function (password) {  
  16.             if (password ==null|| password =='')  
  17.                 return0;  
  18.  
  19.             if (password.length <=4)  
  20.                 return0; //密碼太短  
  21.  
  22.             var Modes =0;  
  23.             for (i =0; i < password.length; i++) {  
  24.                 Modes |= CharMode(password.charCodeAt(i));  
  25.             }  
  26.             return bitTotal(Modes);  
  27.  
  28.             //CharMode函數(shù)   
  29. function CharMode(iN) {  
  30.                 if (iN >=48&& iN <=57) //數(shù)字  
  31. return1;  
  32.                 if (iN >=65&& iN <=90) //大寫字母  
  33. return2;  
  34.                 if (iN >=97&& iN <=122) //小寫  
  35. return4;  
  36.                 else  
  37.                     return8; //特殊字符   
  38.             }  
  39.  
  40.             //bitTotal函數(shù)  
  41. function bitTotal(num) {  
  42.                 modes =0;  
  43.                 for (i =0; i <4; i++) {  
  44.                     if (num &1) modes++;  
  45.                     num >>>=1;  
  46.                 }  
  47.                 return modes;  
  48.             }  
  49.         };  
  50.  
  51.         var viewModel = {  
  52.             Password: ko.observable(""),  
  53.             Ocolor: "#eeeeee"  
  54.         };  
  55.  
  56.         viewModel.PasswordLevel = ko.dependentObservable(function () {  
  57.             return Page.Utility.Registration.getPasswordLevel(this.Password());  
  58.         }, viewModel);  
  59.  
  60.         viewModel.Lcolor = ko.dependentObservable(function () {  
  61.             //根據(jù)密碼強(qiáng)度判斷***個(gè)格顯示的背景色  
  62. returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))  
  63.         }, viewModel);  
  64.  
  65.         viewModel.Mcolor = ko.dependentObservable(function () {  
  66.             //根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色  
  67. returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")  
  68.         }, viewModel);  
  69.  
  70.         viewModel.Hcolor = ko.dependentObservable(function () {  
  71.             //根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色  
  72. returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"  
  73.         }, viewModel);  
  74.  
  75.         $((function () {  
  76.             ko.applyBindings(viewModel);  
  77.         }));  
  78.  
  79.          
  80.     </script> 
  81.     <form name="form1" action=""> 
  82.     輸入密碼:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> 
  83.     <br> 
  84.     密碼強(qiáng)度:  
  85.     <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
  86.         height="23" style='display: inline'> 
  87.         <tr align="center" bgcolor="#eeeeee"> 
  88.             <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }"> 
  89.                 弱  
  90.             </td> 
  91.             <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }"> 
  92.                 中  
  93.             </td> 
  94.             <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }"> 
  95.                 強(qiáng)  
  96.             </td> 
  97.         </tr> 
  98.     </table> 
  99.     </form> 
  100. </body> 
  101. </html> 

原文：http://www.cnblogs.com/TomXu/archive/2011/11/27/2264876.html

【系列文章】

  1. Knockout應(yīng)用開發(fā)指南之創(chuàng)建自定義綁定
  2. Knockout應(yīng)用開發(fā)指南之入門介紹
  3. Knockout應(yīng)用開發(fā)指南之監(jiān)控屬性(Observables)
  4. Knockout應(yīng)用開發(fā)指南之綁定語(yǔ)法
  5. Knockout應(yīng)用開發(fā)指南之模板綁定

 

責(zé)任編輯：陳貽新 來(lái)源： 湯姆大叔的博客
Knockout
相關(guān)推薦

2024-06-13 15:43:04

2024-07-18 00:22:26

2023-01-03 08:17:04

JavaScript檢測(cè)用戶

2020-06-07 11:46:05

密碼信息泄露高強(qiáng)度密碼

2019-07-02 13:16:05

密碼賬號(hào)安全數(shù)據(jù)安全

2017-01-19 09:16:19

2022-04-23 16:36:30

Linux密碼

2020-07-03 07:00:00

Linux用戶活動(dòng)

2009-06-15 11:22:06

2010-04-07 11:04:52

Oracle用戶密碼

2017-01-05 14:01:38

linux密碼高強(qiáng)度

2019-03-18 09:00:04

Linux密碼cracklib

2010-04-08 18:21:56

Oracle用戶密碼

2016-11-08 17:56:37

Linux命令行密碼

2010-10-29 09:13:33

Oracle用戶密碼

2010-04-19 17:10:53

Oracle用戶密碼

2013-05-29 09:47:45

2014-03-14 09:45:18

2023-08-08 09:41:35

Windows微軟

2017-05-23 14:34:58

python大數(shù)據(jù)UUID
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)