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

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

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

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

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

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

>

>

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

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

核心標(biāo)記

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

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

>

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

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

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

元素時(shí)，checkval

函數(shù)都會(huì)被調(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ù)會(huì)注意計(jì)算計(jì)算的理解。我們將查看稍後的工作方式。 分析輸入現(xiàn)在，我們將定義匹配（）方法，使我們可以使字符串與正則表達(dá)式匹配。如果您是正則表達(dá)式的新手，我建議您閱讀Vasili關(guān)於必須知道的正則表達(dá)式的精彩文章。

>

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

計(jì)算複雜性

>計(jì)算複雜性相對(duì)容易，因?yàn)槲覀冎恍枰獙?duì)我們較早地分配給我們的變量的值進(jìn)行簡單的添加和乘法。我們將基本分?jǐn)?shù)添加到多餘字符數(shù)量及其乘數(shù)的乘積中。我們?yōu)榇髮懽帜?，?shù)字和符號(hào)做同樣的事情。然後，我們?yōu)榻M合（如果存在）添加一個(gè)獎(jiǎng)勵(lì)，並在字符串平坦（如果字符串平均）中添加罰款。

<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)在，所有計(jì)算都在我們身後，我們可以更新UI以反映更改。這是每種狀態(tài)。

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

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

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

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

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

>

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

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

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

函數(shù)之後重置分?jǐn)?shù)和懲罰值，並且您會(huì)很好。 >

<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ā)生了什麼。我們首先將整個(gè)密碼轉(zhuǎn)換為小寫字母。之後，我們將其轉(zhuǎn)換為大小屬性，以獲取唯一字符的數(shù)量。如果唯一字符的數(shù)量小於或等於3，我們?yōu)锳nalyzeString（）函數(shù)設(shè)置值以檢查重複模式。這將依賴於等級(jí)，並檢查是否在密碼中重複3個(gè)或更多字母數(shù)字。字符。

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

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)是一個(gè)安全的密碼，而實(shí)際上它很快就會(huì)被打破。這是由於我們?cè)谶@裡的算法的簡單性。我們不檢查是否是否需要為此而進(jìn)行角色替換或常見的密碼或模式。這樣做會(huì)增加本教程的難度，同時(shí)降低其可接近性，這兩個(gè)我都不想要這本特定的文章。

test()>

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

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

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