这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。那么这种效果怎么实现的呢?下面小编给大家介绍下 js 动态检验密码强度的实现方法,一起看看吧
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图:
我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好。所以我通过其他方式实现。
实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度。
密码强度这个横条实质是一个 div,其他标记也可以,div 里面有一个 span 标记,我就是通过改变 span 的长度和颜色来表现密码的强度的。原理很简单,但是在操作过程中,可能会遇到一些问题很头疼。
1. 先在 html 页面里面定义一个输入框用于输入密码,一个一个 div,在 div 里面放一个 span 标签并且设置相应的属性,type,name,value,class,id 等
- <font color="#FF0000">
- *
- </font>
- 密码:
- <input type="text" name="password" id="password" value="请输入密码" onfocus=" passwordClear()"
- onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" />
- </td>
- <td>
- <font id="pwdTip">
- 不少于6位字符
- </font>
- <br/>
2 密码强度:
- <div class="pwdStrongth">
- <span class="cinnerprogress" id="innerprogress">
- </span>
- </div>
- <font id="strongthTip">
- </font>
2. 给标签设置相应的 CSS,来控制标签的样式,使其感觉漂亮一点:
- <style type="text/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%;}
- </style>
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 < 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="强度:弱";
- strongthTip.style.color="red";
- pwdprogress.setAttribute("class","strengthLv1");
- }
- else if(sec==2)
- {
- strongthTip.innerText="强度:中";
- strongthTip.style.color="orange";
- pwdprogress.setAttribute("class","strengthLv2");
- }
- else if(sec==3)
- {
- strongthTip.innerText="强度:强";
- strongthTip.style.color="#09F";
- pwdprogress.setAttribute("class","strengthLv3");
- }
- else if(sec==4)
- {
- strongthTip.innerText="强度:超强";
- strongthTip.style.color="green";
- pwdprogress.setAttribute("class","strengthLv4");
- }
- }
以上所述是小编给大家介绍的 JavaScript 动态检验密码强度的实现方法, 实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0608/330547.html