TShopping

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

[教學] STRENGTH.JS 密碼強度檢查,使用 JQUERY 框架(已測試含附件)

[複製鏈接]
發表於 2020-3-12 22:56:49 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
DEMO圖片


Strength.js 套件能用在註冊時就先檢查密碼的強度,現在很多網站都有會員機制,很多人怕密碼會忘記或是偷懶都會用一些很簡短簡單的密碼,這樣就讓其它惡意的使用者就有機可趁,這也讓網站的管理者很頭大。

此套件主要的標準分數為:
密碼必須包含8個字符以上
密碼必須包含1個小寫字母
密碼必須包含1個大寫字母
密碼必須包含1個數字
當然有特殊的字元也是加分的關鍵

使用方法:
第一步 載入 JavaScripts 和 CSS 的樣式檔案

  1. <!-- 樣式檔案 -->
  2. <link href='strength.css' rel='stylesheet' type='text/css'>
  3. <!-- 使用 Google 的 API 取得 jQuery-->
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  5. <!-- Strength.js 的主程式檔案-->
  6. <script type="text/javascript" src="strength.js"></script>
複製代碼


第二步 在您要使用密碼檢查的欄位加上 ID
  1. <input id="myPassword" type="password" name="" value="">
複製代碼


第三步 使用 jQuery 的載入完成後執行 Strength.js
  1. $('#myPassword').strength({
  2.      strengthClass: 'strength',
  3.      // 輸入框的樣式名稱
  4.      strengthMeterClass: 'strength_meter',
  5.      // 輸入的文字樣式名稱
  6.      strengthButtonClass: 'button_strength',
  7.      // 切換按鈕的樣式名稱
  8.      strengthButtonText: 'Show password',
  9.      // 是否顯示密碼文字
  10.      strengthButtonTextToggle: 'Hide Password'
  11.      // 是否要有切換顯示隱藏
  12. });
複製代碼

script 可修改成
  1. $('#myPassword') 也可以改成 $('.myPassword')
複製代碼

input
  1. <input class="myPassword" type="password" name="" value="">
複製代碼

作者網站:http://git.aaronlumsden.com/strength.js/
檔案大小:13 KB (包含範例)


參考文章:https://fufuk.blogspot.com/2014/02/strengthjs-jquery.html

 

臉書網友討論

本帖子中包含更多資源

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

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

本版積分規則



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

GMT+8, 2020-4-10 11:17 , Processed in 0.055816 second(s), 20 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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