在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 性能優化教程。