密码强度验证
需求
首先我们需要知道需求
是什么? 这很重要!
要知道 我们写的一切逻辑都是建立在需求之上
-
当输入框聚焦时提示密码要求
-
当密码符合要求时 隐藏提示 并
给予反馈
-
密码等级低时 提示密码等级为低
-
密码等级一般时 提示密码等级为中
-
密码等级高时 提示密码等级为高
-
-
当密码不符合要求时 重新打开提示
思考如何构建函数
通过上面的需求 你能想到的函数时什么?你能想到的逻辑又是什么?
-
首先 提示的显示隐藏我们可以用事件绑定或者事件监听来做
-
其次 我们需要
利用正则
来判断密码等级-
当密码等级为低时 显示红色
-
当密码等级为中时 显示黄色
-
当密码等级为高时 显示绿色
-
-
最后 根据密码等级来渲染页面 也就是反馈给用户的样式
建议 :
-
在这里 尽量把每个函数的功能区分好 构思好
-
不仅要让自己能看懂 还要让别人能看懂
-
这样的代码才是好的代码
可读性更好 可维护性更高
实现功能 实现需求
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 ;
padding : 0