React 实现给密码输入框加上【密码强度】展示？-51CTO.COM

密码强度

平时我们在浏览各种网站和 APP 的时候，都接触过密码这个东西~

密码设置的好不好，关乎到你的账号安全性，越复杂的密码越安全，所以密码强度很重要，而我们在做注册功能的时候，也有责任去帮协助用户设置一个高密码强度的密码~

那么密码强度怎么计算呢？且应该如何实现以下这样的密码强度动画展示效果呢？

思路

其实思路很简单：

(1) 监听密码输入框的变化

(2) 密码变化时，获取密码文本，并通过某种方式计算这个密码的强度分数

(3) 根据强度分数，改变下方块的颜色和宽度

0分：强度低，红色，宽度 20%
1分：强度低，红色，宽度 40%
2分：强度中，橙色，宽度 60%
3分：强度高，绿色，宽度 80%
4分：强度高，绿色，宽度 100%

计算密码强度分数

用什么方式去计算密码强度方式呢？我们可以用 @zxcvbn-ts/core这个库来计算~

@zxcvbn-ts/core 是 zxcvbn 密码强度估计器的 TypeScript 实现版本，用于帮助开发者评估用户设置密码的复杂度和安全性，计算的依据有：

密码长度：越长分数越高
字符类型：数字、字母、符号
词典攻击检测：内置词典列表，检测密码强度
评分系统： 0-4分，分数越高越安全
熵计算：评测密码所需尝试次数，熵越高，分数越高

pnpm i @zxcvbn-ts/core

密码强度动画展示效果

计算了分数之后，我们需要根据分数去展示：

不同的颜色
不同的宽度

我们可以使用属性选择器的方式，去完成这一个效果，看以下代码~

当密码改变的时候，会实时计算密码强度分数，这也就是意味着 data-score 这个属性会一直变，接着我们可以在样式中，去根据属性选择器去设置不同的颜色和宽度

现在可以看到这样的效果

完善动画效果

但是我们如果想实现分格的效果，可以借助伪元素去做~

现在可以达到我们期望的效果~

完整代码

import { Input } from 'antd'
import { useMemo, useState } from 'react'
import { zxcvbn } from '@zxcvbn-ts/core'
import './Index.less'

const Index = () => {
   const [password, setPassword] = useState('')
   const passwordStrength = useMemo(() => {
        return zxcvbn(password).score
   }, [password])
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
        setPassword(e.target.value)
   }

   return <>
        <Input.Password value={password} onChange={onChange} />
        <div className='strength-meter-bar'>
            <div className='strength-meter-bar--fill' data-score={passwordStrength}></div>
        </div>
    </>
}

export default Index

// Index.less

.strength-meter-bar {
    position: relative;
    height: 6px;
    margin: 10px auto 6px;
    border-radius: 6px;
    background-color: rgb(0 0 0 / 25%);
  
    // 增加的伪元素样式代码
    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: 10;
      width: 20%;
      height: inherit;
      border-width: 0 5px;
      border-style: solid;
      border-color: #fff;
      background-color: transparent;
    }
    &::before {
      left: 20%;
    }
    &::after {
      right: 20%;
    }
    // 增加的伪元素样式代码
  
    &--fill {
      position: absolute;
      width: 0;
      height: inherit;
      transition:
        width 0.5s ease-in-out,
        background 0.25s;
      border-radius: inherit;
      background-color: transparent;
  
      &[data-score='0'] {
        width: 20%;
        background-color: darken(#e74242, 10%);
      }
  
      &[data-score='1'] {
        width: 40%;
        background-color: #e74242;
      }
  
      &[data-score='2'] {
        width: 60%;
        background-color: #efbd47;
      }
  
      &[data-score='3'] {
        width: 80%;
        background-color: fade(#55d187, 50%);
      }
  
      &[data-score='4'] {
        width: 100%;
        background-color: #55d187;
      }
    }
  }