密码验证 : 密码强度验证

密码强度验证

需求

首先我们需要知道需求是什么？ 这很重要！

要知道 我们写的一切逻辑都是建立在需求之上

• 当输入框聚焦时提示密码要求

• 当密码符合要求时 隐藏提示 并给予反馈

  • 密码等级低时 提示密码等级为低

  • 密码等级一般时 提示密码等级为中

  • 密码等级高时 提示密码等级为高

• 当密码不符合要求时 重新打开提示

---

思考如何构建函数

通过上面的需求 你能想到的函数时什么？你能想到的逻辑又是什么？

• 首先 提示的显示隐藏我们可以用事件绑定或者事件监听来做

• 其次 我们需要利用正则来判断密码等级

  • 当密码等级为低时 显示红色

  • 当密码等级为中时 显示黄色

  • 当密码等级为高时 显示绿色

• 最后 根据密码等级来渲染页面 也就是反馈给用户的样式

建议 :

• 在这里 尽量把每个函数的功能区分好 构思好

• 不仅要让自己能看懂 还要让别人能看懂

• 这样的代码才是好的代码 可读性更好 可维护性更高

---

实现功能 实现需求

HTML结构

在提示盒子的内部写3个div 不同等级给予不同颜色不同数量的提示

    密码 : <input type="text" id="ipt">
    <p id="p">请输入6-20位的带有数字字母或者特殊符号的密码</p>
    <div class="box">
        <span></span>
        <div></div>
        <div></div>
        <div></div>
    </div>

不管样式行为再怎么花里胡哨 也一定要先把结构里要出现的元素写出来

---

CSS样式

由于考虑到等级分为三种 所以给提示盒子分3中不同的class类名

每一个类名对应的子元素的样式也不同

到js部分我们只需要操作class类名就可以了

     <style>
        *{
   
            margin : 0 ;
            padd