用JavaScript评估用户输入密码的强度（Knockout版）

早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）。

我们来看看如果使用Knockout更简单的来实现密码强度的验证。

原有代码请查看：

 
 
 
    
  
  
  
  1. 
  
  
  
    3. 
  
  
  
  3. 
  
  
  
  4.     
    5. 
  
  
  
  5. 
  
  
  
  6. 
  
  
  
  7.     
    8. 
  
  
  
  8.         //CharMode函数  
    9. 
  
  
  
  9. function CharMode(iN) { 
    10. 
  
  
  
  10.             if (iN >=48&& iN <=57) //数字 
    11. 
  
  
  
  11. return1; 
    12. 
  
  
  
  12.             if (iN >=65&& iN <=90) //大写字母 
    13. 
  
  
  
  13. return2; 
    14. 
  
  
  
  14.             if (iN >=97&& iN <=122) //小写 
    15. 
  
  
  
  15. return4; 
    16. 
  
  
  
  16.             else 
    17. 
  
  
  
  17.                 return8; //特殊字符  
    18. 
  
  
  
  18.         } 
    19. 
  
  
  
  19. 
  
  
  
  20.         //bitTotal函数  
    21. 
  
  
  
  21. function bitTotal(num) { 
    22. 
  
  
  
  22.             modes =0; 
    23. 
  
  
  
  23.             for (i =0; i <4; i++) { 
    24. 
  
  
  
  24.                 if (num &1) modes++; 
    25. 
  
  
  
  25.                 num >>>=1; 
    26. 
  
  
  
  26.             } 
    27. 
  
  
  
  27.             return modes; 
    28. 
  
  
  
  28.         } 
    29. 
  
  
  
  29. 
  
  
  
  30.         //checkStrong函数  
    31. 
  
  
  
  31. function checkStrong(sPW) { 
    32. 
  
  
  
  32.             if (sPW.length <=4) 
    33. 
  
  
  
  33.                 return0; //密码太短 
    34. 
  
  
  
  34.             Modes =0; 
    35. 
  
  
  
  35.             for (i =0; i < sPW.length; i++) { 
    36. 
  
  
  
  36.                 Modes |= CharMode(sPW.charCodeAt(i)); 
    37. 
  
  
  
  37.             } 
    38. 
  
  
  
  38.             return bitTotal(Modes); 
    39. 
  
  
  
  39.         } 
    40. 
  
  
  
  40. 
  
  
  
  41. 
  
  
  
  42.         //pwStrength函数  
    43. 
  
  
  
  43. function pwStrength(pwd) { 
    44. 
  
  
  
  44.             O_color ="#eeeeee"; 
    45. 
  
  
  
  45.             L_color ="#FF0000"; 
    46. 
  
  
  
  46.             M_color ="#FF9900"; 
    47. 
  
  
  
  47.             H_color ="#33CC00"; 
    48. 
  
  
  
  48.             if (pwd ==null|| pwd =='') { 
    49. 
  
  
  
  49.                 Lcolor = Mcolor = Hcolor = O_color; 
    50. 
  
  
  
  50.             } else { 
    51. 
  
  
  
  51.                 S_level = checkStrong(pwd); 
    52. 
  
  
  
  52.                 switch (S_level) { 
    53. 
  
  
  
  53.                     case0: 
    54. 
  
  
  
  54.                         Lcolor = Mcolor = Hcolor = O_color; 
    55. 
  
  
  
  55.                     case1: 
    56. 
  
  
  
  56.                         Lcolor = L_color; 
    57. 
  
  
  
  57.                         Mcolor = Hcolor = O_color; 
    58. 
  
  
  
  58.                         break; 
    59. 
  
  
  
  59.                     case2: 
    60. 
  
  
  
  60.                         Lcolor = Mcolor = M_color; 
    61. 
  
  
  
  61.                         Hcolor = O_color; 
    62. 
  
  
  
  62.                         break; 
    63. 
  
  
  
  63.                     default: 
    64. 
  
  
  
  64.                         Lcolor = Mcolor = Hcolor = H_color; 
    65. 
  
  
  
  65.                 } 
    66. 
  
  
  
  66. 
  
  
  
  67.                 document.getElementById("strength_L").style.background = Lcolor; 
    68. 
  
  
  
  68.                 document.getElementById("strength_M").style.background = Mcolor; 
    69. 
  
  
  
  69.                 document.getElementById("strength_H").style.background = Hcolor; 
    70. 
  
  
  
  70.                 return; 
    71. 
  
  
  
  71.             } 
    72. 
  
  
  
  72.         } 
    73. 
  
  
  
  73.     
    74. 
  
  
  
  74.     输入密码:
    75. 
  
  
  
  75.     
    76. 
  
  
  
  76.     密码强度: 
    77. 
  
  
  
  77.     
  
  
  
  78.         height="23" style='display: inline'>
    79. 
  
  
  
  79.         
    80. 
  
  
  
  80.             
    81. 
  
  
  
  81.                 弱 
    82. 
  
  
  
  82.             
    83. 
  
  
  
  83.             
    84. 
  
  
  
  84.                 中 
    85. 
  
  
  
  85.             
    86. 
  
  
  
  86.             
    87. 
  
  
  
  87.                 强 
    88. 
  
  
  
  88.             
    89. 
  
  
  
  89.         
    90. 
  
  
  
  90.     
    91. 
  
  
  
  91.     
    92. 
  
  
  
  92. 
  
  
  
  93.

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

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

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

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

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

 
 
 
    
  
  
  
  1. viewModel.PasswordLevel = ko.dependentObservable(function () { 
    2. 
  
  
  
  2.     return Page.Utility.Registration.getPasswordLevel(this.Password()); 
    3. 
  
  
  
  3. }, viewModel); 
    4. 
  
  
  
  4. 
  
  
  
  5. viewModel.Lcolor = ko.dependentObservable(function () { 
    6. 
  
  
  
  6.     //根据密码强度判断***个格显示的背景色 
    7. 
  
  
  
  7.     return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")) 
    8. 
  
  
  
  8. }, viewModel); 
    9. 
  
  
  
  9. 
  
  
  
  10. viewModel.Mcolor = ko.dependentObservable(function () { 
    11. 
  
  
  
  11.     //根据密码强度判断第二个格显示的背景色 
    12. 
  
  
  
  12.     return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00") 
    13. 
  
  
  
  13. }, viewModel); 
    14. 
  
  
  
  14. 
  
  
  
  15. viewModel.Hcolor = ko.dependentObservable(function () { 
    16. 
  
  
  
  16.     //根据密码强度判断第三个格显示的背景色 
    17. 
  
  
  
  17.     return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00" 
    18. 
  
  
  
  18. }, viewModel);
    19.

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

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

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2. 输入密码: 
    3. 
  
  
  
    4. 
  
  
  

    5. 
  
  
  
  5. 密码强度: 
    6. 
  
  
  
  6. 
  
  
  
  7.     height="23" style='display: inline'>
    8. 
  
  
  
  8.     
    9. 
  
  
  
  9.         弱
    10. 
  
  
  
  10.         中
    11. 
  
  
  
  11.         强
    12. 
  
  
  
  12.     
    13. 
  
  
  
  13. 
  
  
  
  14.

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

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

完整版代码如下：

 
 
 
    
  
  
  
  1. 
  
  
  
  2. 
  
  
  
  3. 
  
  
  
  4.     
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.     
    7. 
  
  
  
  7. 
  
  
  
  8. 
  
  
  
  9.     
    10. 
  
  
  
  10.         var PagePage = Page || {}; 
    11. 
  
  
  
  11.         PagePage.Utility = Page.Utility || {}; 
    12. 
  
  
  
  12.         PagePage.Utility.Registration = Page.Utility.Registration || {}; 
    13. 
  
  
  
  13. 
  
  
  
  14.         //获取密码强度 
    15. 
  
  
  
  15.         Page.Utility.Registration.getPasswordLevel =function (password) { 
    16. 
  
  
  
  16.             if (password ==null|| password =='') 
    17. 
  
  
  
  17.                 return0; 
    18. 
  
  
  
  18. 
  
  
  
  19.             if (password.length <=4) 
    20. 
  
  
  
  20.                 return0; //密码太短 
    21. 
  
  
  
  21. 
  
  
  
  22.             var Modes =0; 
    23. 
  
  
  
  23.             for (i =0; i < password.length; i++) { 
    24. 
  
  
  
  24.                 Modes |= CharMode(password.charCodeAt(i)); 
    25. 
  
  
  
  25.             } 
    26. 
  
  
  
  26.             return bitTotal(Modes); 
    27. 
  
  
  
  27. 
  
  
  
  28.             //CharMode函数  
    29. 
  
  
  
  29. function CharMode(iN) { 
    30. 
  
  
  
  30.                 if (iN >=48&& iN <=57) //数字 
    31. 
  
  
  
  31. return1; 
    32. 
  
  
  
  32.                 if (iN >=65&& iN <=90) //大写字母 
    33. 
  
  
  
  33. return2; 
    34. 
  
  
  
  34.                 if (iN >=97&& iN <=122) //小写 
    35. 
  
  
  
  35. return4; 
    36. 
  
  
  
  36.                 else 
    37. 
  
  
  
  37.                     return8; //特殊字符  
    38. 
  
  
  
  38.             } 
    39. 
  
  
  
  39. 
  
  
  
  40.             //bitTotal函数 
    41. 
  
  
  
  41. function bitTotal(num) { 
    42. 
  
  
  
  42.                 modes =0; 
    43. 
  
  
  
  43.                 for (i =0; i <4; i++) { 
    44. 
  
  
  
  44.                     if (num &1) modes++; 
    45. 
  
  
  
  45.                     num >>>=1; 
    46. 
  
  
  
  46.                 } 
    47. 
  
  
  
  47.                 return modes; 
    48. 
  
  
  
  48.             } 
    49. 
  
  
  
  49.         }; 
    50. 
  
  
  
  50. 
  
  
  
  51.         var viewModel = { 
    52. 
  
  
  
  52.             Password: ko.observable(""), 
    53. 
  
  
  
  53.             Ocolor: "#eeeeee" 
    54. 
  
  
  
  54.         }; 
    55. 
  
  
  
  55. 
  
  
  
  56.         viewModel.PasswordLevel = ko.dependentObservable(function () { 
    57. 
  
  
  
  57.             return Page.Utility.Registration.getPasswordLevel(this.Password()); 
    58. 
  
  
  
  58.         }, viewModel); 
    59. 
  
  
  
  59. 
  
  
  
  60.         viewModel.Lcolor = ko.dependentObservable(function () { 
    61. 
  
  
  
  61.             //根据密码强度判断***个格显示的背景色 
    62. 
  
  
  
  62. returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")) 
    63. 
  
  
  
  63.         }, viewModel); 
    64. 
  
  
  
  64. 
  
  
  
  65.         viewModel.Mcolor = ko.dependentObservable(function () { 
    66. 
  
  
  
  66.             //根据密码强度判断第二个格显示的背景色 
    67. 
  
  
  
  67. returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00") 
    68. 
  
  
  
  68.         }, viewModel); 
    69. 
  
  
  
  69. 
  
  
  
  70.         viewModel.Hcolor = ko.dependentObservable(function () { 
    71. 
  
  
  
  71.             //根据密码强度判断第二个格显示的背景色 
    72. 
  
  
  
  72. returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00" 
    73. 
  
  
  
  73.         }, viewModel); 
    74. 
  
  
  
  74. 
  
  
  
  75.         $((function () { 
    76. 
  
  
  
  76.             ko.applyBindings(viewModel); 
    77. 
  
  
  
  77.         })); 
    78. 
  
  
  
  78. 
  
  
  
  79.         
    80. 
  
  
  
  80.     
    81. 
  
  
  
  81.     
    82. 
  
  
  
  82.     输入密码:
    83. 
  
  
  
  83.     
    84. 
  
  
  
  84.     密码强度: 
    85. 
  
  
  
  85.     
  
  
  
  86.         height="23" style='display: inline'>
    87. 
  
  
  
  87.         
    88. 
  
  
  
  88.             
    89. 
  
  
  
  89.                 弱 
    90. 
  
  
  
  90.             
    91. 
  
  
  
  91.             
    92. 
  
  
  
  92.                 中 
    93. 
  
  
  
  93.             
    94. 
  
  
  
  94.             
    95. 
  
  
  
  95.                 强 
    96. 
  
  
  
  96.             
    97. 
  
  
  
  97.         
    98. 
  
  
  
  98.     
    99. 
  
  
  
  99.     
    100. 
  
  
  
  100. 
  
  
  
  101.

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

【系列文章】

  1. Knockout应用开发指南之创建自定义绑定
  2. Knockout应用开发指南之入门介绍
  3. Knockout应用开发指南之监控属性(Observables)
  4. Knockout应用开发指南之绑定语法
  5. Knockout应用开发指南之模板绑定

分享题目：用JavaScript评估用户输入密码的强度（Knockout版）
本文来源：http://www.shufengxianlan.com/qtweb/news40/367740.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站策划知识

行业网站建设

甘孜州博瑞斯　　 　宣威网站建设　　 　成都印刷厂　　 　四川电信高防服务器托管　　 　高端网站设计　　 　ssl证书申请　　 　眉山托管服务器　　 　成都发电机维修　　 　百度关键词排名　　 　成都网站运营维护　　 　做网站价格　　 　网络营销推广　　 　成都门户网站建设设计方案　　 　内江做网站　　 　免备案虚拟主机空间　　 　SF双层罐　　 　重庆电商网站建设　　 　美美搬家　　 　光华机房服务器托管　　 　华泰海航