js 前端密码强度检测zxcvbn的使用(含react示例)

简介: js 前端密码强度检测zxcvbn的使用(含react示例)

目录


下载包


yarn add zxcvbn

npm i zxcvbn -S

在页面引入并使用


import zxcvbn from 'zxcvbn';

zxcvbn是个函数,入参是字符串也就是用于检测的密码。

zxcvbn('123456abc!!!')

函数返回一个对象:


其中与密码强度相关的有guesses、guesses_log10、score。

guesses数据比较大不好判断。

score得分只有0~4整数范围没有小数,变化不够丰富,但是在特定需求的情况下也可以使用。

推荐使用guesses_log10,可以将密码强度的弱、中、强分为0 ~ 4、4 ~ 8、8~12及以上。

image.png

结合h5的meter标签


react中为例:

import React, { Component } from 'react';
import zxcvbn from 'zxcvbn';
export default class index extends Component {
  state = {
    value: 0,
    msg: '',
  };
  render() {
    return (
      <div>
        <div>密码:</div>
        <input
          value={this.state.msg}
          onChange={e => {
            this.setState({
              msg: e.target.value,
              value: zxcvbn(e.target.value).guesses_log10,
            });
          }}
        ></input>
        <div>强度:</div>
        <meter min="0" max="12" low="4" high="8" optimum="10" value={this.state.value}></meter>
      </div>
    );
  }
}

image.png

image.png

目录
打赏
0
0
0
0
4
分享
相关文章
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
121 9
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
1027 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
在数字化时代,共享文件的安全性至关重要。本文聚焦Node.js环境,介绍如何通过JavaScript对象字面量构建数据结构管理文件安全信息,包括使用`bcryptjs`库加密密码和权限校验算法,确保高效且安全的文件共享。通过实例代码展示加密与权限验证过程,帮助各行业实现严格的信息资产管理与协作。
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
322 62
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
282 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
83 11
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
73 2
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
541 9
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
94 6
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
99 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等