构建简单的密码强度检查器-js教程-PHP中文网

提供即时反馈是目前的内在。为什么要限制自己检查用户名和电子邮件地址？为什么不扩展它以提供有关用户输入密码强度的快速视觉反馈？今天，我们将研究如何使用正则表达式和简单算法来创建简单的密码检查器。

>，因为大多数安全专家都会告诉您，用户始终是最弱的链接。当用户选择一个非常不明智的密码时，即使是最安全的系统也很脆弱。考虑到这一点，最近的趋势似乎正在向用户提供有关密码强度的快速反馈，以便用户可以扩展或修改密码以使其更安全。感兴趣的？让我们立即开始吧！这是我们今天要建立的内容的演示：

设计目标

我们针对此特定功能的设计目标相对较小。

>
。
让事件处理程序检查输入，但将其他所有内容委派给了单个辅助方法。
>辅助方法应照顾分析输入并分析它，并确保将结果计算出来的范围。大于预期的最低限度，以免在无效的条目上浪费CPU周期。

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

>

，为了保持这种文字的本能和几乎能力，我决定与非常基本的Algorith一起使用，这是为了保持这种文字的兴趣。该算法分析字符串，为额外的长度以及使用数字，符号和大写字母提供奖金，以及对仅字母或数字输入的罚款。我们不会考虑针对字典检查输入，因为这超出了文章的范围。>首先，我们检查输入字符串的长度。如果它大于最小长度，请给予其基本分数为50。否则将其0。接下来，遍历字符串的每个字符，并检查它是符号，数字还是大写字母。如果是这样，请记下它。然后，请检查字符串在推荐的最低限度上具有多少个额外字符，并为每个字符授予奖金。如果字符串包含大写字母，数字和符号或所有三个符号的组合，也会授予奖金。为每个人的存在提供奖励。

检查字符串是否仅包含小写字母或数字，如果是的，则惩罚。它不会非常复杂，但是会捕获很多不良密码。一旦我们在代码中看到它，您就会更好地理解这一点。

核心标记

演示页面的HTML标记看起来像是如此：

>忽略所有常规标记。请注意，带有

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

>的输入元素将包含有关惩罚的消息，因此我们已经大胆而红色。所需的功能。请注意，我们广泛使用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>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>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()>