网站LOGO
白雾茫茫丶
页面加载中
12月4日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    React - 实现一个基于 Antd 的密码强度校验组件
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发 · ReactAnt-Design
    共 5249 字 · 约 2 分钟 · 1208
    本文最后更新于2023年12月28日,已经过了341天没有更新,若内容或图片失效,请留言反馈
    在基于 NestUmi 技术栈的个人项目开发中,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!

    效果预览

    组件思想

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

    我们有两种方向:

    1. 组件库找个合适的 UI
    2. 自己开发造轮子

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

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

    组件开发

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

      Typescript 代码:
      /*
       @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. 由于 Progressant-progress-steps-item 无法自动撑开,我们需要新建一个 index.module.less 文件做样式穿透:

      CSS 代码:
      .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. 引入样式并绑定类名:

      Typescript 代码:
      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. 执行安装命令

      PowerShell 代码:
      pnpm add zxcvbn
    2. 页面引入

      Typescript 代码:
      import zxcvbn from 'zxcvbn';
      
      // zxcvbn 是个函数,接收一个参数,参数就是字符串密码。
      zxcvbn("abc123456");

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

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

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

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

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

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

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

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

      编写一个函数解析 password

      Typescript 代码:
      const watchStrength = (password: string): number => {
      const analysisValue = zxcvbn(password)
      // score得分只有0~4,且只有整数范围并没有小数
      return (analysisValue.score + 1) * 20
      }
    2. 绑定到 Progress 组件:

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

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

    仓库地址:Xmw-Admin

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

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 19分钟前 在线

    🕛

    本站已运行 2 年 337 天 21 小时 23 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事