TShopping

 找回密碼
 註冊
搜索
查看: 134|回復: 0

[教學] 密碼強度指示套件 - jQuery Password Strength Indicator

[複製鏈接]
發表於 2020-3-12 20:45:16 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
前言
最近客戶想做密碼強度指示器,讓用戶輸入密碼的時候,即時知道自己的密碼複雜度

但一想到要自己去"定義"怎樣的密碼複雜度算弱or強,整個人就惰性大發XD(畢竟牽扯JS邏輯+UI bar條+配給CSS顏色)

幸好網路上找來找去,有找到一個簡單好用好上手的套件,也就是本文的主角:「jQuery Password Strength Indicator」


Demo畫面

實作
首先到 https://github.com/matoilic/jquery.pwstrength 下載整包.zip檔並且解壓縮

然後把 jquery.pwstrength.js 放到自己的Web專案目錄

由於官方的CSS檔(路徑:jquery.pwstrength-master\demo\style.css)和頁面設計混在一塊,所以我自行額外抽出如下↓


  1. /*密碼強度指示*/


  2. #pwindicator {
  3.     margin-top: 4px;
  4.     /*width: 150px;*/  /*官網有這個,但好像有加沒加都沒差,所以拿掉*/
  5. }

  6. /*官方只有寫 .bar,為了避免和自己Web專案有衝突,Selector改寫如下*/
  7. #pwindicator > .bar {
  8.     margin-bottom: 2px; /*這官網沒有,視自己專案需求要不要加。沒加的話,可能bar條和文字會上下黏一塊*/
  9.     height: 2px;
  10. }

  11. #pwindicator > .label {
  12.   /*顯示弱、中、強的文字大小,此Selector官方沒有,自己加的*/
  13.   font-size: 12px;
  14. }


  15. /*以下顏色自行配*/
  16. /*非常弱*/
  17. .pw-very-weak .bar {
  18.     background: #d00;
  19.     width: 30px;
  20. }

  21. .pw-very-weak .label {
  22.     color: #d00;
  23. }

  24. .pw-weak .bar {
  25.     background: #d00;
  26.     width: 60px;
  27. }

  28. .pw-weak .label {
  29.     color: #d00;
  30. }

  31. .pw-mediocre .bar {
  32.     background: #f3f01a;
  33.     width: 90px;
  34. }

  35. .pw-mediocre .label {
  36.     color: #f3f01a;
  37. }

  38. .pw-strong .bar {
  39.     background: #f3b31a;
  40.     width: 120px;
  41. }

  42. .pw-strong .label {
  43.     color: #f3b31a;
  44. }

  45. .pw-very-strong .bar {
  46.     background: #0d0;
  47.     width: 150px;
  48. }

  49. .pw-very-strong .label {
  50.     color: #0d0;
  51. }
  52. /*End密碼強度指示*/
複製代碼


剩下來的是Html Code,當然要先引用jQuery、再引用 jquery.pwstrength.js

以下是完整代碼

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Test</title>
  6.     <!--引用CSS-->
  7.     <link href="MyStyle.css" rel="stylesheet" />
  8. </head>
  9. <body>

  10.     <!--留意要加上data attribute-->
  11.     <input type="password" name="PD" data-indicator="pwindicator" />
  12.     <div id="pwindicator">
  13.         <div class="bar"></div>
  14.         <div class="label"></div>
  15.     </div>

  16.     <!--引用jQuery-->
  17.     <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  18.     <!--密碼強度指示器-->
  19.     <script src="jquery.pwstrength.js"></script>
  20.     <script type="text/javascript">
  21.         $(function () {
  22.             //啟用密碼強度指示器,並變更說明文字
  23.             $("input[name='PD']").pwstrength({ texts: ['非常弱', '弱', '中等', '強', '非常強'] });

  24.         });
  25.     </script>
  26. </body>
  27. </html>
複製代碼
參考文章https://dotblogs.com.tw/shadow/2018/05/24/175916


 

臉書網友討論

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2020-4-10 10:01 , Processed in 0.061514 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表