首页 > 蚂蚁部落 > 正文

JavaScript密码强度提示
2017-12-27 09:19:53   来源:   评论:0 点击:

输入密码的时候,根据密码的复杂程度给出弱、中和强等类似的提示。下面分享使用JavaScript如何实现此效果。代码实例如下:[HTML] 纯文本查

输入密码的时候,根据密码的复杂程度给出弱、中和强等类似的提示。

下面分享使用JavaScript如何实现此效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>蚂蚁部落</title><style type="text/css">#pwdLever td{  background-color:Gray;  width:45px;  text-align:center;}</style><script type="text/javascript">window.onload=function(){  var textInput = document.getElementById("txtPwd");  //给密码输入框 注册键放开事件  textInput.onkeyup=function(){    var pwdValue=this.value;    var num=pwdChange(pwdValue);    var tds=document.getElementById("pwdLever").getElementsByTagName("td");    //修改密码颜色    if(num==0||num==1){      tds[0].style.backgroundColor="red";      tds[1].style.backgroundColor="gray";      tds[2].style.backgroundColor="gray";    }    else if(num == 2){      tds[0].style.backgroundColor = "red";      tds[1].style.backgroundColor = "red";      tds[2].style.backgroundColor = "gray";    }    else if(num == 3) {      tds[0].style.backgroundColor = "red";      tds[1].style.backgroundColor = "red";      tds[2].style.backgroundColor = "red";    }    else{      tds[0].style.backgroundColor = "gray";      tds[1].style.backgroundColor = "gray";      tds[2].style.backgroundColor = "gray";    }  }}function pwdChange(v){  var num = 0;  var reg = /d/; //如果有数字  if (reg.test(v)) {    num++;  }  reg = /[a-zA-Z]/; //如果有字母  if(reg.test(v)){    num++;  }  reg = /[^0-9a-zA-Z]/; //如果有特殊字符  if(reg.test(v)) {    num++;  }  //如果密码小于6   if(v.length < 6){     num--;  }  return num;}</script></head><body><table>  <tr>    <td><input type="text" id="txtPwd" /></td>  </tr>  <tr>    <td>     <table id="pwdLever">        <tr>          <td>弱</td>          <td>中</td>          <td>强</td>        </tr>      </table>     </td>  </tr></table></body></html>

在输入密码的时候,显示当前密码的强度。下面介绍一下实现过程:

一.实现原理:

原理比较简单,当在密码框输入密码之后触发onkeyup事件进而执行事件处理函数,此函数可以判断当前密码框中的密码的强度,并返回一个值,然后根据此此设置三个单元格的背景颜色,也就实现了密码强度提示效果。

二.代码注释:

(1).window.onload=function(){},当文档完全加载完毕再去执行函数中的代码。

(2).var textInput=document.getElementById("txtPwd"),获取id值为txtPwd的对象。

(3).textInput.onkeyup=function(){},为密码框绑定键盘按键onkeyup事件处理函数。

(4).var pwdValue=this.value,获取密码框的值。

(5). var num=pwdChange(pwdValue),创建一个变量num并接收pwdChange()函数的返回值。

(6).var tds=document.getElementById("pwdLever").getElementsByTagName("td"),获取id为pwdLever元素的下的所有单元格集合。

(7).if(num==0||num==1){},根据num的值设置单元格的背景颜色。

(8).function pwdChange(v){},创建一个函数用来判断密码强度。

相关热词搜索:

上一篇:$.extend()和$.fn.extend()区别
下一篇:最后一页

分享到: 收藏
评论排行