JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript动态检验密码强度的实现方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图：
我看到有些人用几张不同的图片来替换，这样似乎可以，但是不太好。所以我通过其他方式实现。
实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度。
密码强度这个横条实质是一个div，其他标记也可以，div里面有一个Span标记，我就是通过改变span的长度和颜色来表现密码的强度的。原理很简单，但是在操作过程中，可能会遇到一些问题很头疼。
1.先在html页面里面定义一个输入框用于输入密码，一个一个div，在div里面放一个span标签并且设置相应的属性，type，name，value，class，id等
密码：
2 密码强度：
2.给标签设置相应的css，来控制标签的样式，使其感觉漂亮一点：
{
border:solid 1px #000000;
border-radius:5px;
height
:15px;
width
:150px;}
/*用于设置span标签的初始样式*/
.cinnerprogress
{
display: block;
height: 100%;
BACkground-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四个将用于设置span标签在不同密码强度的样式*/
.strengthLv1
{
display: block;
height: 100%;
border-radius: 5px;
BACkground
:red;width:25%;}
.strengthLv2
{
display: block;
height: 100%;
border-radius: 5px;
BACkground:orange;width:50%;}
.strengthLv3
{
display: block;
height: 100%;
border-radius: 5px;
BACkground:#09F;width:75%;}
.strengthLv4
{
display: block;
height: 100%;
border-radius: 5px;
BACkground:green;width
:100%;}
3.写相应的JavaScript方法通过检测用户输入的密码强度来调用不同的样式来表现密码强度，密码强度的规则可以自己随意定义，只需在密码输入框的onblur（失去焦点）事件和onkeyup（按下键盘上来之后）事件调用下面的方法即可：
= 6) //用于判断用户输入的密码强度
{ // 至少六个字符
for (var i = 0; i < regx
s.length; i++) //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合则强度+1
{
if (va
l.match(regxs[i]))
{
sec++;
}
}
}
if(sec=
=0) //通过不同的密码强度调用不同的样式
{
h3thTip.innerText="";
//setAttribute("class","className")中class是指改变class这个属性，所以要带引号，className是span标签的类名，也是对应的样式名
pwdprogres
s.setAttribute("class","cinnerprogress"
);
}
else if(sec==1)
{
h3thTip.innerText="强度：弱";
h3thTip.style.color="red";
pwdprogres
s.setAttribute("class","strengthLv1"
);
}
else if(sec==2)
{
h3thTip.innerText="强度：中";
h3thTip.style.color="orange";
pwdprogres
s.setAttribute("class","strengthLv2"
);
}
else if(sec==3)
{
h3thTip.innerText="强度：强";
h3thTip.style.color="#09F";
pwdprogres
s.setAttribute("class","strengthLv3"
);
}
else if(sec==4)
{
h3thTip.innerText="强度：超强";
h3thTip.style.color="green";
pwdprogres
s.setAttribute("class","strengthLv4"
);
}
}
以上所述是小编给大家介绍的JavaScript动态检验密码强度的实现方法,实现一个模拟后台数据登入的效果。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
大佬总结
以上是大佬教程为你收集整理的JavaScript动态检验密码强度的实现方法全部内容，希望文章能够帮你解决JavaScript动态检验密码强度的实现方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
