React - 实现一个基于 Antd 的密码强度校验组件

简介: 这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。

前言

在基于 NestUmi.js 技术栈的个人项目开发中,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!

效果预览

image.png

组件思想

既然是密码强度校验,那么强度就必须有个梯度,这个时候就必须找到一个合适的效果。

我们有两种方向:

  1. 组件库找个合适的 UI

  2. 自己开发造轮子

经过一番摸索,Antd-Process 组件进入了我的视野:

image.png

于是我决定基于这个组件改造一番!

组件开发

1、 在目录 /src/components 新建 StrengthMeter/index.tsx 文件,开发基本结构。

/*
   @Description: 密码强度组件
   @Version: 2.0
   @Author: 白雾茫茫丶
   @Date: 2023-01-09 17:15:19
   @LastEditors: 白雾茫茫丶
   @LastEditTime: 2023-01-16 15:40:45
  */
  import type { FC } from 'react'
  import { Progress, Form, Row, Col } from 'antd';
  import { ProFormText } from '@ant-design/pro-components'; // antd 高级组件
  import zxcvbn from 'zxcvbn'; // 密码强度校验

  const StrengthMeter: FC = () => {
    // 获取上下文 form 实例
    const form = Form.useFormInstance();
    // 监听密码的改变
    const password = Form.useWatch('password', form);

    /**
     * @description: 监听密码强度相应变化
     * @param {string} password
     */
    const watchStrength = (password: string): number => {
      const analysisValue = zxcvbn(password)
      // score得分只有0~4,且只有整数范围并没有小数
      return (analysisValue.score + 1) * 20
    }

    return (
      <>
        {/* 密码 */}
        <ProFormText.Password
          label="密码"
          name="password"
          rules={[{ required: true, min: 6, max: 12, message: "请输入密码" }]}
        />
        {/* 确认密码 */}
        <ProFormText.Password
          label="确认密码"
          name="confirmPassword"
          fieldProps={
  { visibilityToggle: false }}
          rules={[
            { required: true, message: "请输入确认密码" },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error("两次密码输入不一致"));
              },
            })
          ]}
        />
        {/* 显示密码强度 */}
        <Progress
          percent={password ? watchStrength(password) : 0}
          steps={5}
          strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
          showInfo={false}
        />
        <Row justify="space-around">
          {
            ['非常弱', '弱', '一般', '强', '非常强'].map(value => <Col span={4} key={value}>{value}  </Col>)
          }
        </Row>
      </>
    )
  }

  export default StrengthMeter

2、 由于 Progress 的 ant-progress-steps-item 无法自动撑开,我们需要新建一个 index.module.less 文件做样式穿透:

.process-steps{
    width:100%;
    text-align: center;
    :global(.ant-progress){
      width:100%
    }
    :global(.ant-progress .ant-progress-steps-item){
      width:calc(20% - 2px) !important
    }
  }

3、 引入样式并绑定类名:

import styles from './index.module.less'

  <div className={styles['process-steps']}>
      <Progress
        percent={password ? watchStrength(password) : 0}
        steps={5}
        strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
        showInfo={false}
      />
  </div>
  <Row justify="space-around" className={styles['process-steps']}>
      {
        ['非常弱', '弱', '一般', '强', '非常强'].map(value => <Col span={4} key={value}>{value}</Col>)
      }
  </Row>

这时候就能得到我们想要的效果了,接下来我们要校验密码强度。

安装 zxcvbn

1、 执行安装命令

pnpm add zxcvbn

2、 页面引入

import zxcvbn from 'zxcvbn';

 // zxcvbn 是个函数,接收一个参数,参数就是字符串密码。
 zxcvbn("abc123456");

该函数返回一个对象,其中与密码强度相关的属性有:guesses、guesses_log10、score。

image.png

那么这三个属性,我们应该怎么选择呢?

  • guesses 值很大,不利于我们判断。

  • guesses_log10 的值越大越安全,根据测试,值在 12 以上就很安全了。

  • score 的取值范围只有整数 0~4,值越大越安全。

如果业务考虑的场景比较多,建议使用 guesses_log10,这里我们封装使用 score。

3、 使用 Form.useWatch 监听 password 的变化:

  // 获取上下文 form 实例
  const form = Form.useFormInstance();
  // 监听密码的改变
  const password = Form.useWatch('password', form);

  编写一个函数解析 **password** :
  const watchStrength = (password: string): number => {
      const analysisValue = zxcvbn(password)
      // score得分只有0~4,且只有整数范围并没有小数
      return (analysisValue.score + 1) * 20
  }

4、 绑定到 Progress 组件:

<Progress
    percent={password ? watchStrength(password) : 0}
    steps={5}
    strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
    showInfo={false}
  />

到这里,我们的任务就完成了,我们一起看看实际效果吧:

image.png

仓库地址:react-admin

如果对你有用,麻烦给个 Star !

相关文章
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
340 0
|
前端开发 JavaScript 数据安全/隐私保护
详解React antd中setFieldsValu的简便使用
详解React antd中setFieldsValu的简便使用
519 0
|
2月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
React - 实现一个基于 Antd 的数值范围组件
|
9天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
31 2
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
429 2
react对antd中Select组件二次封装
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
635 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
600 1
react使用antd中的Checkbox实现多选
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
249 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
265 3
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
514 1