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中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧2022-08-08
这篇文章主要为大家归纳总结了Remix 表单常用方法及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2022-09-09
本篇文章主要介绍了React-Native使用Mobx实现购物车功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了Header组件热门搜索栏的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家分享了React Native时间转换格式工具类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了React中的useContext使用,使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
这篇文章主要介绍了react项目中redux的调试工具不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了react实现电商商品列表的流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论