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

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

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

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

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

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

创建一个 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,})");

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

让我们通过下表说明事件流：

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

由于使用了 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 示例中所演示的，这是你影响用户的一项强大功能。你正在影响他们为你的程序使用更健壮的密码，从而有助于防止它们被盗用。