日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用JavaScript評估用戶輸入密碼的強(qiáng)度（Knockout版）

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

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

原有代碼請查看：

 
 
 
    
  
  
  
  1. 
  
  
  
    3. 
  
  
  
  3. 
  
  
  
  4.     
    5. 
  
  
  
  5. 
  
  
  
  6. 
  
  
  
  7.     
    8. 
  
  
  
  8.     
    9. 
  
  
  
  9.     輸入密碼:
    10. 
  
  
  
  10.     
    11. 
  
  
  
  11.     密碼強(qiáng)度: 
    12. 
  
  
  
  12.     
  
  
  
  13.         height="23" style='display: inline'>
    14. 
  
  
  
  14.         
    15. 
  
  
  
  15.             
    16. 
  
  
  
  16.                 弱 
    17. 
  
  
  
  17.             
    18. 
  
  
  
  18.             
    19. 
  
  
  
  19.                 中 
    20. 
  
  
  
  20.             
    21. 
  
  
  
  21.             
    22. 
  
  
  
  22.                 強(qiáng) 
    23. 
  
  
  
  23.             
    24. 
  
  
  
  24.         
    25. 
  
  
  
  25.     
    26. 
  
  
  
  26.     
    27. 
  
  
  
  27. 
  
  
  
  28.

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

 
 
 
    
  
  
  
  1. var PagePage = Page || {}; 
    2. 
  
  
  
  2. PagePage.Utility = Page.Utility || {}; 
    3. 
  
  
  
  3. PagePage.Utility.Registration = Page.Utility.Registration || {}; 
    4. 
  
  
  
  4. 
  
  
  
  5. //獲取密碼強(qiáng)度 
    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函數(shù)  
    20. 
  
  
  
  20.     function CharMode(iN) { 
    21. 
  
  
  
  21.         if (iN >= 48 && iN <= 57) //數(shù)字 
    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函數(shù) 
    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.

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

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

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

 
 
 
    
  
  
  
  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.     //根據(jù)密碼強(qiáng)度判斷***個(gè)格顯示的背景色 
    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.     //根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色 
    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.     //根據(jù)密碼強(qiáng)度判斷第三個(gè)格顯示的背景色 
    17. 
  
  
  
  17.     return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00" 
    18. 
  
  
  
  18. }, viewModel);
    19.

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

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

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2. 輸入密碼: 
    3. 
  
  
  
    4. 
  
  
  

    5. 
  
  
  
  5. 密碼強(qiáng)度: 
    6. 
  
  
  
  6. 
  
  
  
  7.     height="23" style='display: inline'>
    8. 
  
  
  
  8.     
    9. 
  
  
  
  9.         弱
    10. 
  
  
  
  10.         中
    11. 
  
  
  
  11.         強(qiáng)
    12. 
  
  
  
  12.     
    13. 
  
  
  
  13. 
  
  
  
  14.

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

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

完整版代碼如下：

 
 
 
    
  
  
  
  1. 
  
  
  
  2. 
  
  
  
  3. 
  
  
  
  4.     
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.     
    7. 
  
  
  
  7. 
  
  
  
  8. 
  
  
  
  9.     
    10. 
  
  
  
  10.     
    11. 
  
  
  
  11.     輸入密碼:
    12. 
  
  
  
  12.     
    13. 
  
  
  
  13.     密碼強(qiáng)度: 
    14. 
  
  
  
  14.     
  
  
  
  15.         height="23" style='display: inline'>
    16. 
  
  
  
  16.         
    17. 
  
  
  
  17.             
    18. 
  
  
  
  18.                 弱 
    19. 
  
  
  
  19.             
    20. 
  
  
  
  20.             
    21. 
  
  
  
  21.                 中 
    22. 
  
  
  
  22.             
    23. 
  
  
  
  23.             
    24. 
  
  
  
  24.                 強(qiáng) 
    25. 
  
  
  
  25.             
    26. 
  
  
  
  26.         
    27. 
  
  
  
  27.     
    28. 
  
  
  
  28.     
    29. 
  
  
  
  29. 
  
  
  
  30.

原文：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ā)指南之綁定語法
  5. Knockout應(yīng)用開發(fā)指南之模板綁定

分享標(biāo)題：用JavaScript評估用戶輸入密碼的強(qiáng)度（Knockout版）
分享URL：http://www.dlmjj.cn/article/cojiepd.html