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

简介

引言

效果预览

组件思想

组件开发

简介

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它允许开发人员通过将 Web 应用程序分解为可重用的组件来构建它们。这些组件可用于构建复杂和动态的用户界面。React 遵循单向数据流，这意味着数据通过分层结构中的组件向下传递。这使得理解和管理整个应用程序中的数据流变得容易。

React 的一个关键特性是使用虚拟 DOM。虚拟 DOM 是实际 DOM 的轻量级表示，用于优化更新和渲染的性能。当组件的状态发生变化时，React 将更新虚拟 DOM，然后确定需要对实际 DOM 进行的最小更改集。这显着提高了应用程序的性能，因为只对 DOM 进行了必要的更改。

React 还支持服务器端渲染，这可以改进 SEO 并缩短初始加载时间。当在服务器上呈现 React 应用程序时，组件的初始状态将发送到浏览器，这减少了浏览器为显示初始视图而必须执行的工作量。

React 被大型开发人员社区广泛使用和支持，有许多可用资源和第三方库。它还得到各种构建工具的广泛支持，例如 Webpack 和 Babel，这些工具通常用于优化和捆绑 React 代码以供生产使用。此外，许多 IDE 都支持 React，例如 Visual Studio Code，它为 React 代码提供语法高亮和代码完成等功能。

总之，React 是一个流行且功能强大的 JavaScript 库，用于构建用户界面，侧重于可重用组件、性能和可扩展性。它被开发人员广泛使用，并得到大型社区和工具生态系统的支持。

引言

最近在开发 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.Passwordlabel="密码"name="password"rules={[{ required: true, min: 6, max: 12, message: "请输入密码" }]}/>{/* 确认密码 */}<ProFormText.Passwordlabel="确认密码"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("两次密码输入不一致"));},})]}/>{/* 显示密码强度 */}<Progresspercent={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']}><Progresspercent={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 是个函数，接收一个参数，参数就是字符串密码。

该函数返回一个对象，其中与密码强度相关的属性有：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 组件：

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

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