专栏首页京程一灯在React应用程序中用RegEx测试密码强度

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

每日前端夜话第279篇

翻译:疯狂的技术宅

作者:Nic Raboy

来源:thepolyglotdeveloper

正文共:2576 字

预计阅读时间:8分钟

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

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

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

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

React 密码 RegEx 分析器

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

创建一个 React Web 程序

为了使本教程简单易懂,我们将会用 React CLI 工具创建一个新项目。执行以下命令创建一个新项目:

  npx create-react-app example-project

上面的命令会创建带有各种样板文件的 example-project目录。如果你安装了create-react-app CLI 工具,则可以跳过命令的 npx 部分。

打开项目的 src / App.js 文件,并包含以下代码:

  import React from "react";

  class App extends React.Component {
      render() {
          return (
              <div>
                  <!-- Logic Here... -->
              </div>
          );
      }
  }

  export default App;

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

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

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

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

  import React from "react";
  import "./passwordstrength.css";

  class PasswordStrength extends React.Component {

      constructor() {
          super();
          this.state = {}
      }

      render() {
          return ();
      }

  }

  export default PasswordStrength;

下一步,我们将使用功能代码填充此文件。在开始添加核心逻辑之前,需要将 PasswordStrength 类添加到 src/App.js 文件中。该文件的内容如下所示:

  import React from "react";
  import PasswordStrength from "./components/passwordstrength";

  class App extends React.Component {
      render() {
          return (
              <div>
                  <PasswordStrength></PasswordStrength>
              </div>
          );
      }
  }

  export default App;

我们最终展示程序时,只会显示 PasswordStrength 类中的内容。你可以进行修改,但是在理解示例之后做起来更轻松。

用RegEx测试密码强度

在创建项目并生成所有必需的文件之后,现在我们可以开始向程序添加核心逻辑了。打开项目的 src/components/passwordstrength.js 文件,并包含以下内容:

  import React from "react";
  import "./passwordstrength.css";

  class PasswordStrength extends React.Component {

      constructor() {
          super();
          this.state = {
              backgroundColor: "#4285F4"
          }
          this.analyze = this.analyze.bind(this);
      }

      analyze(event) {}

      render() {
          return (
              <div style={{ backgroundColor: this.state.backgroundColor }}>
                  <p><label for="password">Password: </label></p>
                  <p><input type="text" name="password" onChange={this.analyze} /></p>
              </div>
          );
      }

  }

  export default PasswordStrength;

让我们来分解一下从 constructor 方法开始的操作。因为我们计划在组件的整个生命周期中更改背景颜色,所以需要在 state 中定义一个字段来完成该操作。该字段将代表实际的 CSS 属性,该属性将在更改时进行渲染。

因为我们希望逻辑完成后在函数中更改状态变量,所以要确保所讨论的函数具有程序上下文,这就是为什么要使用 bind 函数的原因。

在介绍 analyze 函数之前,先让我们看一下 render 函数:

  render() {
      return (
          <div style={{ backgroundColor: this.state.backgroundColor }}>
              <p><label for="password">Password: </label></p>
              <p><input type="text" name="password" onChange={this.analyze} /></p>
          </div>
      );
  }

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

所以让我们来看一些繁重的工作。

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

const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
const 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 函数:

  analyze(event) {
      if(strongRegex.test(event.target.value)) {
          this.setState({ backgroundColor: "#0F9D58" });
      } else if(mediumRegex.test(event.target.value)) {
          this.setState({ backgroundColor: "#F4B400" });
      } else {
          this.setState({ backgroundColor: "#DB4437" });
      }
  }

首先,我们检查输入字段中的文本是否为强密码,如果不是则检查是否为中等密码。如果两者都不是,则它是不合格的密码。

可以通过一些 CSS 进一步改进。打开项目的 src/components/passwordstrength.css 并包括以下内容:

  .PasswordStrength {
      background-color: #4285F4;
      padding: 25px;
      color: #FFFFFF;
      font-weight: bold;
  }

  .PasswordStrength p {
      display: flex;
  }

  .PasswordStrength input {
      padding: 5px;
      flex-grow: 1;
      outline: none;
  }

如果你正确地完成了所有操作,则应该得到与本教程开始的动画相同的体验。

结论

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

原文链接

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

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript This 的六道坎

    鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

    疯狂的技术宅
  • JavaScript 风格指南 [每日前端夜话(0x1C)]

    原文链接:https://github.com/ryanmcdermott/clean-code-javascript

    疯狂的技术宅
  • React 性能工程

    这篇文章适用于复杂的React应用。如果只是构建一些简单的、小型的应用,你还不用考虑性能问题。不必过早地优化,去构建吧!

    疯狂的技术宅
  • Ionic3学习笔记(十六)上传头像至第三方图床

    个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简...

    Theo Tsao
  • 前端模块化开发--React框架(一): 入门和面向组件编程

    MiChong
  • 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(上)

    摘要: 原创出处 http://www.iocoder.cn/RocketMQ/message-pull-and-consume-first/ 「芋道源码」欢迎...

    芋道源码
  • 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(上)

    本文主要基于 RocketMQ 4.0.x 正式版 1、概述 2、ConsumeQueue 结构 3、ConsumeQueue 存储 DefaultMessag...

    程序猿DD
  • 关于蚂蚁庄园登山赛你可以还不知道的秘密!我也写一个康康!Cocos Creator 3D!

    监听TOUCH_MOVE事件控制小鸡左右移动,并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的,这是因为摄像机投影的原因。我是乘了一个系数,可能有...

    白玉无冰
  • 微信小程序-音乐播放器+背景播放

    1.正常播放音频 2.可以滑动进度条 3.可以切换上一条,下一条音频 4.退出当前页或关闭小程序之后仍然可以正常播放 5.试听功能进入该播放页不可以播放上一条,...

    super.x
  • 前端-微信小程序开发(1):小程序的执行流程是怎么样的?

    我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是我们需要做一个Hybrid体系,如果做App,React Native也是不错的选...

    grain先森

扫码关注云+社区

领取腾讯云代金券