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

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

設(shè)計目標(biāo)

我們針對此特定功能的設(shè)計目標(biāo)相對較小。

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

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

>

>

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

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

核心標(biāo)記

演示頁面的HTML標(biāo)記看起來像是如此：

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

>

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

>的輸入元素將包含有關(guān)懲罰的消息，因此我們已經(jīng)大膽而紅色。所需的功能。請注意，我們廣泛使用jQuery。如有必要，請隨時鏈接到Google的CDN。 變量和事件處理> ，由於很多數(shù)字雜耍將繼續(xù)進(jìn)行，因此我們需要大量變量來保留這些值。由於這是一個演示，而不是生產(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ù)量，而每當(dāng)有密碼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ù)中進(jìn)行一些可變初始化，該函數(shù)會注意計算計算的理解。我們將查看稍後的工作方式。 分析輸入現(xiàn)在，我們將定義匹配（）方法，使我們可以使字符串與正則表達(dá)式匹配。如果您是正則表達(dá)式的新手，我建議您閱讀Vasili關(guān)於必須知道的正則表達(dá)式的精彩文章。

>

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

計算複雜性

>計算複雜性相對容易，因?yàn)槲覀冎恍枰獙ξ覀冚^早地分配給我們的變量的值進(jìn)行簡單的添加和乘法。我們將基本分?jǐn)?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

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

如果其小於最小長度，我們會相應(yīng)地更改文本，並隨著分?jǐn)?shù)的增加而添加弱

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

>更新詳細(xì)的分解

>

隨著主結(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>

>

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

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

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

函數(shù)之後重置分?jǐn)?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ù)設(shè)置值以檢查重複模式。這將依賴於等級，並檢查是否在密碼中重複3個或更多字母數(shù)字。字符。

在上圖中，您可以看到我們已經(jīng)成功解決了重複字符序列的問題。但是，我給出了一個示例，說明了密碼強(qiá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)是一個安全的密碼，而實(shí)際上它很快就會被打破。這是由於我們在這裡的算法的簡單性。我們不檢查是否是否需要為此而進(jìn)行角色替換或常見的密碼或模式。這樣做會增加本教程的難度，同時降低其可接近性，這兩個我都不想要這本特定的文章。

test()>

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

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

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