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

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

設計目標

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

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

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

>

>

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

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

核心標記

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

>忽略所有常規(guī)標記。請注意，帶有

>

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

>元素的ID，div

<div id="container"><br><br>  <h1>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

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

>，具有額外字符，大寫字符，數(shù)字和符號的數(shù)量。我們?yōu)榈诙€對象做同樣的操作，稱為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>

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

元素時，checkval

函數(shù)都會被調(diào)用。

>

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函數(shù)編寫代碼開始。我們首先獲取用戶輸入的密碼，然后在OutputResult（）

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

>

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

計算復雜性

>計算復雜性相對容易，因為我們只需要對我們較早地分配給我們的變量的值進行簡單的添加和乘法。我們將基本分數(shù)添加到多余字符數(shù)量及其乘數(shù)的乘積中。我們?yōu)榇髮懽帜?，?shù)字和符號做同樣的事情。然后，我們?yōu)榻M合（如果存在）添加一個獎勵，并在字符串平坦（如果字符串平均）中添加罰款。

<div id="container"><br><br>  <h1>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

>現(xiàn)在，所有計算都在我們身后，我們可以更新UI以反映更改。這是每種狀態(tài)。

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

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

如果其小于最小長度，我們會相應地更改文本，并隨著分數(shù)的增加而添加弱

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

>更新詳細的分解

>

隨著主結(jié)果的更新，我們可以考慮現(xiàn)在更新統(tǒng)計信息。

.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>

>

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

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

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

函數(shù)之后重置分數(shù)和懲罰值，并且您會很好。>

<div id="container"><br><br>  <h1>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>

>

讓我們看看這里發(fā)生了什么。我們首先將整個密碼轉(zhuǎn)換為小寫字母。之后，我們將其轉(zhuǎn)換為大小屬性，以獲取唯一字符的數(shù)量。如果唯一字符的數(shù)量小于或等于3，我們?yōu)锳nalyzeString（）函數(shù)設置值以檢查重復模式。這將依賴于等級，并檢查是否在密碼中重復3個或更多字母數(shù)字。字符。

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

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>

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

test()>

在本文的范圍內(nèi)，請對詞典的輸入進行查看，并且需要將巨大的字典下載到客戶端或?qū)⑵溥B接到服務器側(cè)系統(tǒng)的系統(tǒng)中。同樣，我真的很想這次避免兩個。希望您發(fā)現(xiàn)該教程很有趣，這對您很有用。請隨時在您的項目中的其他地方重復使用此代碼！

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

以上是構(gòu)建簡單的密碼強度檢查器的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！