在React应用程序中用RegEx测试密码强度

尽管一些组织认为应该由用户选择健壮的用户名和密码来保护本身，可是开发人员能够经过将规则包含在程序的设计中来帮助进行良好的密码选择。例如，开发人员能够经过加入进度条、百分比或颜色，来帮助用户在输入密码时规定密码的质量。

许多人都知道弱密码很短，而且包含字母或数字，但毫不会同时包含二者。咱们也知道强密码包括符号以及区分大小写的字符。那么咱们如何在应用程序中检查这些内容呢？

在本教程中，咱们将用正则表达式来测试密码的复杂性。这将经过 React 程序中的简单 JavaScript 来完成。

要了解咱们要作的工做，请看下面的动画演示：

React 密码 RegEx 分析器

在咱们的示例中，背景颜色将随着密码强度的变化而变化。强度将由几种不一样的正则表达式测试方案来定义。

建立一个 React Web 程序

为了使本教程简单易懂，咱们将会用 React CLI 工具建立一个新项目。执行如下命令建立一个新项目：

1  npx create-react-app example-project
复制代码

上面的命令会建立带有各类样板文件的 example-project目录。若是你安装了create-react-app CLI 工具，则能够跳过命令的 npx 部分。

打开项目的 src / App.js 文件，并包含如下代码：

1  import React from "react";
 2
 3  class App extends React.Component {
 4      render() {
 5          return (
 6              <div>
 7                  <!-- Logic Here... -->
 8              </div>
 9          );
10      }
11  }
12
13  export default App;
复制代码

实际上咱们删除了 src / App.js 文件中的许多样板代码。请记住，目标是使该项目保持简单，以便于理解。

该项目的核心功能将会存在于其本身的组件中。

在项目内建立 src/components 目录，并在该目录内建立 passwordstrength.js 文件和passwordstrength.css 文件。

将如下样板代码添加到 src/components/passwordstrength.js 文件中：

1  import React from "react";
 2  import "./passwordstrength.css";
 3
 4  class PasswordStrength extends React.Component {
 5
 6      constructor() {
 7          super();
 8          this.state = {}
 9      }
10
11      render() {
12          return ();
13      }
14
15  }
16
17  export default PasswordStrength;
复制代码

下一步，咱们将使用功能代码填充此文件。在开始添加核心逻辑以前，须要将 PasswordStrength 类添加到 src/App.js 文件中。该文件的内容以下所示：

1  import React from "react";
 2  import PasswordStrength from "./components/passwordstrength";
 3
 4  class App extends React.Component {
 5      render() {
 6          return (
 7              <div>
 8                  <PasswordStrength></PasswordStrength>
 9              </div>
10          );
11      }
12  }
13
14  export default App;
复制代码

咱们最终展现程序时，只会显示 PasswordStrength 类中的内容。你能够进行修改，可是在理解示例以后作起来更轻松。

用RegEx测试密码强度

在建立项目并生成全部必需的文件以后，如今咱们能够开始向程序添加核心逻辑了。打开项目的src/components/passwordstrength.js 文件，并包含如下内容：

1  import React from "react";
 2  import "./passwordstrength.css";
 3
 4  class PasswordStrength extends React.Component {
 5
 6      constructor() {
 7          super();
 8          this.state = {
 9              backgroundColor: "#4285F4"
10          }
11          this.analyze = this.analyze.bind(this);
12      }
13
14      analyze(event) {}
15
16      render() {
17          return (
18              <div style={{ backgroundColor: this.state.backgroundColor }}>
19                  <p><label for="password">Password: </label></p>
20                  <p><input type="text" name="password" onChange={this.analyze} /></p>
21              </div>
22          );
23      }
24
25  }
26
27  export default PasswordStrength;
28
复制代码

让咱们来分解一下从 constructor 方法开始的操做。由于咱们计划在组件的整个生命周期中更改背景颜色，因此须要在 state 中定义一个字段来完成该操做。该字段将表明实际的 CSS 属性，该属性将在更改时进行渲染。

由于咱们但愿逻辑完成后在函数中更改状态变量，因此要确保所讨论的函数具备程序上下文，这就是为何要使用 bind 函数的缘由。

在介绍 analyze 函数以前，先让咱们看一下 render 函数：

1  render() {
2      return (
3          <div style={{ backgroundColor: this.state.backgroundColor }}>
4              <p><label for="password">Password: </label></p>
5              <p><input type="text" name="password" onChange={this.analyze} /></p>
6          </div>
7      );
8  }
9
复制代码

父 HTML 元素带有背景样式，该样式将随着状态变量的改变而改变。从密码输入字段的更改事件中调用 analyze 功能。

因此让咱们来看一些繁重的工做。

咱们知道用于检查密码的正则表达式逻辑不会动态修改，因此把这些正则表达式定义为类外部的常量，把它们定义在 src/components/passwordstrength.js 文件中：

1const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
2const mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
复制代码

那么这些正则表达式是什么意思呢？

让咱们经过下表说明事件流：

正则表达式	描述
^	密码字符串将以这种方式开始
(?=.*[a-z])	该字符串必须包含至少1个小写字母字符
(?=.*[A-Z])	该字符串必须包含至少1个大写字母字符
(?=.*[0-9])	该字符串必须至少包含1个数字字符
(?=.[!@#\$%\^&])	该字符串必须至少包含一个特殊字符，可是为了不冲突，转义了 RegEx 保留字符。
(?=.{8,})	字符串必须至少是八个字符。

上表是用于测试强密码的正则表达式的细节。能够将其修改成你所认为的强密码规则。

因为使用了 or 事件的 | 运算符，所以中等强度检查略有不一样。基本上咱们所说的是中等强度的密码，能够知足两个不一样的字符，同时具备特定的总体长度。

要真正进行测试，让咱们回到 analyze 函数：

1  analyze(event) {
2      if(strongRegex.test(event.target.value)) {
3          this.setState({ backgroundColor: "#0F9D58" });
4      } else if(mediumRegex.test(event.target.value)) {
5          this.setState({ backgroundColor: "#F4B400" });
6      } else {
7          this.setState({ backgroundColor: "#DB4437" });
8      }
9  }
复制代码

首先，咱们检查输入字段中的文本是否为强密码，若是不是则检查是否为中等密码。若是二者都不是，则它是不合格的密码。

能够经过一些 CSS 进一步改进。打开项目的 src/components/passwordstrength.css 并包括如下内容：

1  .PasswordStrength {
 2      background-color: #4285F4;
 3      padding: 25px;
 4      color: #FFFFFF;
 5      font-weight: bold;
 6  }
 7
 8  .PasswordStrength p {
 9      display: flex;
10  }
11
12  .PasswordStrength input {
13      padding: 5px;
14      flex-grow: 1;
15      outline: none;
16  }
复制代码

若是你正确地完成了全部操做，则应该获得与本教程开始的动画相同的体验。

结论

你刚刚学到了如何用简单的 JavaScript 和正则表达式（RegEx）在 React 程序中测试密码强度。尽管 JavaScript 能够与任何框架一块儿工做，例如 AngularJS 示例中所演示的，这是你影响用户的一项强大功能。你正在影响他们为你的程序使用更健壮的密码，从而有助于防止它们被盗用。

原文连接

https://www.thepolyglotdeveloper.com/2020/02/test-password-strength-regex-react-application/

欢迎关注前端公众号：前端先锋，免费领取 Vue、React 性能优化教程。