密码强度
平时我们在浏览各种网站和 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/core1.
密码强度动画展示效果
计算了分数之后 ，我们需要根据分数去展示 ：
不同的颜色不同的宽度
我们可以使用属性选择器的方式 ，去完成这一个效果，看以下代码~
当密码改变的时候
，会实时计算密码强度分数 ，这也就是建站模板意味着 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 Index1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23. 复制// 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; } } }1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.
