JavaScript动态检验密码强度的实现方法

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。那么这种效果怎么实现的呢？下面小编给大家介绍下js动态检验密码强度的实现方法，一起看看吧

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图：

我看到有些人用几张不同的图片来替换，这样似乎可以，但是不太好。所以我通过其他方式实现。

实质上这是根据用户输入的不同密码强度来改变颜色区域的长度。

密码强度这个横条实质是一个div，其他标记也可以，div里面有一个span标记，我就是通过改变span的长度和颜色来表现密码的强度的。原理很简单，但是在操作过程中，可能会遇到一些问题很头疼。

1.先在html页面里面定义一个输入框用于输入密码，一个一个div，在div里面放一个span标签并且设置相应的属性，type，name，value，class，id等

 *密码：不少于6位字符

2 密码强度：

2.给标签设置相应的css，来控制标签的样式，使其感觉漂亮一点：

3.写相应的JavaScript方法通过检测用户输入的密码强度来调用不同的样式来表现密码强度，密码强度的规则可以自己随意定义，只需在密码输入框的onblur（失去焦点）事件和onkeyup（按下键盘上来之后）事件调用下面的方法即可：

 function pwdComplex()//用于判断密码强度的 { var pwdobj=document.getElementById("password"); //获取密码输入框对象 var pwdTip=document.getElementById("pwdTip");//获取密码提示文字对象 var pwdprogress=document.getElementById("innerprogress"); //获取span标签对象 var strongthTip=document.getElementById("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

以上就是JavaScript动态检验密码强度的实现方法的详细内容，更多请关注0133技术站其它相关文章！