html怎么设置密码强度,JavaScript动态检验密码强度的实现⽅
法
平时我们会在某些⽹站的注册页⾯或者更改密码的页⾯发现当我们输⼊密码时，会有⼀个类似于进度条的长条进⾏提⽰⽤户输⼊的密码强度。如下图：
我看到有些⼈⽤⼏张不同的图⽚来替换，这样似乎可以，但是不太好。所以我通过其他⽅式实现。
实质上这是根据⽤户输⼊的不同密码强度来改变 颜⾊区域的长度。
密码强度这个横条实质是⼀个div，其他标记也可以，div⾥⾯有⼀个span标记，我就是通过改变span的长度和颜⾊来表现密码的强度的。原理很简单，但是在操作过程中，可能会遇到⼀些问题很头疼。
1.先在html页⾯⾥⾯定义⼀个输⼊框⽤于输⼊密码，⼀个⼀个div，在div⾥⾯放⼀个span标签并且设置相应的属
性，type，name，value，class，id等
*密码：
不少于6位字符
2 密码强度：
2.给标签设置相应的css，来控制标签的样式，使其感觉漂亮⼀点：
/*⽤于修饰密码强度条外边框div*/
.pwdStrongth{
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(按下键盘上来之后)事件调⽤下⾯的⽅法即可：
function pwdComplex()//⽤于判断密码强度的
{
var ElementById("password"); //获取密码输⼊框对象
var ElementById("pwdTip");//获取密码提⽰⽂字对象
var ElementById("innerprogress"); //获取span标签对象
var ElementById("strongthTip");//获取密码强度提⽰⽂字的对象
var regxs = new Array();//定义⼀个数组⽤于存放不同的正则表达式
regxs[0]=/[^a-zA-Z0-9_]/g;
regxs[1]=/[a-z]/g;
regxs[2]=/[0-9]/g;
regxs[3]=/[A-Z]/g;
var val = pwdobj.value;//获取⽤户输⼊的密码
var len = val.length;//获取⽤户输⼊的密码长度
var sec = 0; //定义⼀个变量⽤于存放密码强度
if (len >= 6) //⽤于判断⽤户输⼊的密码强度
{ // ⾄少六个字符
for (var i = 0; i < regxs.length; i++) //遍历所有正则表达式，检测⽤户输⼊的密码符合哪些正则表达式，如果符合则强度+1
{
if (val.match(regxs[i]))
{
sec++;
}
}
}
if(sec==0) //通过不同的密码强度调⽤不同的样式
{
strongthTip.innerText="";
//setAttribute("class", "className")中class是指改变class这个属性，所以要带引号，className是span标签的类名，也是对应的样式名
pwdprogress.setAttribute("class","cinnerprogress");
}
else if(sec==1)
{
strongthTip.innerText="强度：弱";
javascript进度条lor="red";
pwdprogress.setAttribute("class","strengthLv1");
}
else if(sec==2)
{
strongthTip.innerText="强度：中";
lor="orange";
pwdprogress.setAttribute("class","strengthLv2");
}
else if(sec==3)
{
strongthTip.innerText="强度：强";
lor="#09F";
pwdprogress.setAttribute("class","strengthLv3");
}
else if(sec==4)
{
strongthTip.innerText="强度：超强";
lor="green";
pwdprogress.setAttribute("class","strengthLv4");
}
}
以上所述是⼩编给⼤家介绍的JavaScript动态检验密码强度的实现⽅法，实现⼀个模拟后台数据登⼊的效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！