構建簡單的密碼強度檢查器

提供即時反饋是目前的內在。為什麼要限制自己檢查用戶名和電子郵件地址？為什麼不擴展它以提供有關用戶輸入密碼強度的快速視覺反饋？今天，我們將研究如何使用正則表達式和簡單算法來創建簡單的密碼檢查器。

>，因為大多數安全專家都會告訴您，用戶始終是最弱的鏈接。當用戶選擇一個非常不明智的密碼時，即使是最安全的系統也很脆弱。考慮到這一點，最近的趨勢似乎正在向用戶提供有關密碼強度的快速反饋，以便用戶可以擴展或修改密碼以使其更安全。感興趣的？讓我們立即開始吧！這是我們今天要建立的內容的演示：

設計目標

我們針對此特定功能的設計目標相對較小。

在其密碼強度上提供了視覺反饋。這意味著無需單擊按鈕來測試強度。
• >
觸發事件可以是任何鍵盤事件。我選擇了輸入框的鑰匙
• 。
• 讓事件處理程序檢查輸入，但將其他所有內容委派給了單個輔助方法。
>
• >輔助方法應照顧分析輸入並分析它，並確保將結果計算出來的範圍。大於預期的最低限度，以免在無效的條目上浪費CPU週期。

返回到活動處理程序的返回控制器，以防其他任何需要完成任何事情。

>

>

，為了保持這種文字的本能和幾乎能力，我決定與非常基本的Algorith一起使用，這是為了保持這種文字的興趣。該算法分析字符串，為額外的長度以及使用數字，符號和大寫字母提供獎金，以及對僅字母或數字輸入的罰款。我們不會考慮針對字典檢查輸入，因為這超出了文章的範圍。 >首先，我們檢查輸入字符串的長度。如果它大於最小長度，請給予其基本分數為50。否則將其0。接下來，遍歷字符串的每個字符，並檢查它是符號，數字還是大寫字母。如果是這樣，請記下它。 然後，請檢查字符串在推薦的最低限度上具有多少個額外字符，並為每個字符授予獎金。如果字符串包含大寫字母，數字和符號或所有三個符號的組合，也會授予獎金。為每個人的存在提供獎勵。

檢查字符串是否僅包含小寫字母或數字，如果是的，則懲罰。它不會非常複雜，但是會捕獲很多不良密碼。一旦我們在代碼中看到它，您就會更好地理解這一點。

核心標記

演示頁面的HTML標記看起來像是如此：

>忽略所有常規標記。請注意，帶有

>

div> div> element的ID的輸入元素，具有Div

>元素的ID，div

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

> div

>的輸入元素將包含有關懲罰的消息，因此我們已經大膽而紅色。所需的功能。請注意，我們廣泛使用jQuery。如有必要，請隨時鏈接到Google的CDN。 變量和事件處理> ，由於很多數字雜耍將繼續進行，因此我們需要大量變量來保留這些值。由於這是一個演示，而不是生產代碼，因此我決定將這些變量聲明為全局，並通過助手方法訪問它們，而不是內部聲明它們，然後將它們傳遞到函數。第一個，稱為輸入元素和num

>，具有額外字符，大寫字符，數字和符號的數量。我們為第二個對像做同樣的操作，稱為num

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

對象具有字符的數量，而每當有密碼input

元素時，checkval

函數都會被調用。

>

let baseScore = 0;<br>let score = 0;<br>const minPasswordLength = 8;<br><br>const complexity = document.querySelector("#complexity");<br>const passwordInput = document.querySelector("#password");<br><br>let num = {<br>  excess: 0,<br>  upper: 0,<br>  numbers: 0,<br>  symbols: 0<br>};<br><br>let bonus = {<br>  excess: 3,<br>  upper: 4,<br>  numbers: 5,<br>  symbols: 5,<br>  combo: 0,<br>  onlyLower: 0,<br>  onlyNumber: 0,<br>  uniqueChars: 0,<br>  repetition: 0<br>};<br>

讓我們通過為我們的Event Handler Callback函數編寫代碼開始。我們首先獲取用戶輸入的密碼，然後在OutputResult（）

>函數中進行一些可變初始化，該函數會注意計算計算的理解。我們將查看稍後的工作方式。 分析輸入現在，我們將定義匹配（）方法，使我們可以使字符串與正則表達式匹配。如果您是正則表達式的新手，我建議您閱讀Vasili關於必須知道的正則表達式的精彩文章。

>

接下來，我們必須確定輸入字符串的長度與密碼的指定最小長度之間的差異。這為我們提供了多餘的字符。然後，我們檢查字符串是否具有大寫，數字和符號。如果是這樣，請給予獎金。我們還檢查一下它是否具有其中兩個的組合，並授予較小的獎金。我們使用正則表達式進行檢查，如果是這樣，則對此練習的密碼進行懲罰。

計算複雜性

>計算複雜性相對容易，因為我們只需要對我們較早地分配給我們的變量的值進行簡單的添加和乘法。我們將基本分數添加到多餘字符數量及其乘數的乘積中。我們為大寫字母，數字和符號做同樣的事情。然後，我們為組合（如果存在）添加一個獎勵，並在字符串平坦（如果字符串平均）中添加罰款。

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

>更新UI

>現在，所有計算都在我們身後，我們可以更新UI以反映更改。這是每種狀態。

>我們將在此處定義兩個函數。主函數稱為Div

，要刪除的類和要添加的類。輔助功能稱為默認的類，將其背景顏色更改為原始黑色。 >

如果其小於最小長度，我們會相應地更改文本，並隨著分數的增加而添加弱

。隨意更改每個評分的基線得分。我只是提出了不科學的值以使演示進行。

>更新詳細的分解

>

隨著主結果的更新，我們可以考慮現在更新統計信息。

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

>

>此部分並不像它看起來一樣混淆。讓我解釋一下。

，而不是更新詳細結果的單個值，而是求助於更新容器的完整HTML值。我知道，當這些盒子的數量匯總在一起時，這將是緩慢的，但是單獨訪問每個元素，然後更新其值為小型演示的值似乎相當適得其反。因此，在這里和我一起運行。

這就像將常規HTML注入元素一樣，除了我們將其中的幾個變量放置在內部，以啟用詳細信息即時更新。每個值都會獲取init（）>函數不僅對初始值分配有用。實際上，它需要在每個分析（）

函數之後重置分數和懲罰值，並且您會很好。 >

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

>

讓我們看看這裡發生了什麼。我們首先將整個密碼轉換為小寫字母。之後，我們將其轉換為大小屬性，以獲取唯一字符的數量。如果唯一字符的數量小於或等於3，我們為AnalyzeString（）函數設置值以檢查重複模式。這將依賴於等級，並檢查是否在密碼中重複3個或更多字母數字。字符。

在上圖中，您可以看到我們已經成功解決了重複字符序列的問題。但是，我給出了一個示例，說明了密碼強度檢查器的另一個限制。 >您可以看到，

pa $$ w0rd $

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

出現是一個安全的密碼，而實際上它很快就會被打破。這是由於我們在這裡的算法的簡單性。我們不檢查是否是否需要為此而進行角色替換或常見的密碼或模式。這樣做會增加本教程的難度，同時降低其可接近性，這兩個我都不想要這本特定的文章。

test()>

在本文的範圍內，請對詞典的輸入進行查看，並且需要將巨大的字典下載到客戶端或將其連接到服務器側系統的系統中。同樣，我真的很想這次避免兩個。希望您發現該教程很有趣，這對您很有用。請隨時在您的項目中的其他地方重複使用此代碼！

>該帖子已通過Monty Shokeen的貢獻進行了更新。蒙蒂（Monty）是一位全棧開發人員，他也喜歡編寫教程並了解新的JavaScript庫。

以上是構建簡單的密碼強度檢查器的詳細內容。更多資訊請關注PHP中文網其他相關文章！