React实现基于Antd密码强度校验组件示例详解

更新时间：2023年01月17日 11:42:01 作者：白雾茫茫丶

这篇文章主要为大家介绍了React实现基于Antd密码强度校验组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

最近在开发 Nest 和 Umi 技术栈的个人项目，在用户管理模块需要用到一个密码强度校验组件，在网上寻找一方资料，没有找到自己想要的，特此自己造轮子！

效果预览

组件思想

既然是密码强度校验，那么强度就必须有个梯度，这个时候就必须找到一个合适的效果。
我们有两种方向：① 组件库找个合适的 UI ， ② 自己开发造轮子
经过一番摸索， Antd 的 Progress 组件进入了我的视野：

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

组件开发

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

/*
 * @Description: 密码强度组件
 * @Version: 2.0
 * @Author: Cyan
 * @Date: 2023-01-09 17:15:19
 * @LastEditors: Cyan
 * @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
   * @return {*}
   * @author: Cyan
   */
  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

此时的效果是这样的：

由于 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
  }
}

然后引入样式并绑定类名：

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>

这时候就能得到我们想要的效果了，接下来我们要校验密码强度。
3. 这里我们要用到一个库：zxcvbn，页面引入

import zxcvbn from 'zxcvbn';

zxcvbn 是个函数，接收一个参数，参数就是字符串密码。

zxcvbn("abc123456");

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

那么这三个属性，我们应该怎么选择呢？

①: guesses 值很大，不利于我们判断。

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

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

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

4. 使用 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
}

绑定到 Progress 组件：

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

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

仓库地址：Xmw-Admin

以上就是React实现基于Antd密码强度校验组件示例详解的详细内容，更多关于React Antd密码强度校验的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React声明组件的方法总结
这篇文章主要给大家介绍了react声明组件有哪几种方法,各有什么不同,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-11-11
react组件多次渲染问题的解决
本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
React可定制黑暗模式切换开关组件
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React项目搭建与Echarts工具使用详解
这篇文章主要介绍了React项目搭建与Echarts工具使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
手挽手带你学React之React-router4.x的使用
这篇文章主要介绍了手挽手带你学React之React-router4.x的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
react自动化构建路由的实现
这篇文章主要介绍了react自动化构建路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
react-router中<Link/>的属性详解
这篇文章主要给大家介绍了关于react-router中<Link/>属性的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
React-Native中一些常用组件的用法详解(一)
这篇文章主要跟大家分享了关于React-Native中一些常用组件的用法，其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法，分别给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
2017-06-06
无废话快速上手React路由开发
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧
2021-05-05
useEffect 返回函数执行过程源码解析
这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04

React实现基于Antd密码强度校验组件示例详解

目录

引言

效果预览

组件思想

组件开发

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具