Js密码强度实时验证代码

更新时间：2010年06月07日 23:36:53 作者：

这款密码强度实时验证代码比较实用啊，也比较简单，通过对输入字符串的判断，得知密码的强度。

效果图:

演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>密码强度测试</title> </head> <script language="javascript" type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122) //小写 return 4; else return 8; //特殊字符 } //bitTotal函数 //计算出当前密码当中一共有多少种模式 function bitTotal(num){ modes=0; for (i=0;i<4;i++){ if (num & 1) modes++; num>>>=1; } return modes; } //checkStrong函数 //返回密码的强度级别 function checkStrong(sPW){ if (sPW.length<=4) return 0; //密码太短 Modes=0; for (i=0;i<sPW.length;i++){ //测试每一个字符的类别并统计一共有多少种模式. Modes|=CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } //pwStrength函数 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 function pwStrength(pwd){ O_color="#e0f0ff"; L_color="#FF0000"; M_color="#FF9900"; H_color="#33CC00"; if (pwd==null||pwd==''){ Lcolor=Mcolor=Hcolor=O_color; } else { S_level=checkStrong(pwd); //alert(S_level); switch(S_level) { case 0: Lcolor=Mcolor=Hcolor=O_color; case 1: Lcolor=L_color; Mcolor=Hcolor=O_color; break; case 2: Lcolor=Mcolor=M_color; Hcolor=O_color; break; default: Lcolor=Mcolor=Hcolor=H_color; } } document.getElementById("strength_L").style.background=Lcolor; document.getElementById("strength_M").style.background=Mcolor; document.getElementById("strength_H").style.background=Hcolor; return; } </script> <body> <form id="form1"> <div> 输入密码:<input type="text" id="TextBox1" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"><br> 密码强度: <table border="1" cellpadding="1" bordercolordark="#fdfeff" bordercolorlight="#99ccff" cellspacing="1" style="width: 200px; display: inline; background-color: #e0f0ff"> <tr> <td id="strength_L" style="width: 100px; height: 19px;" align="center"> 弱 </td> <td id="strength_M" style="width: 100px; height: 19px;" align="center"> 中 </td> <td id="strength_H" style="width: 100px; height: 19px;" align="center"> 强 </td> </tr> </table> </div> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

控制input的CSS但不影响CheckBox以及Radio的样式
在一些Web界面,有时候为了方便会写一个全局的input样式,这样所有的样式会立刻变化，如果能更好的区分checkbox等呢。
2009-09-09
js常见表单应用技巧
显示框架内的指定位置改变文本框的属性改变文本框的属性改变文本框的属性（下拉列表）
2008-01-01
javascript下一种表单元素获取方法存在的问题
在工作中, 我常看到这样一种获取表单元素的方法:var eles = document.forms['表单名'].elements['元素名']; 如果对获取到的结果进行遍历操作, 那么, 我要告诉你: 小心, eles.length的值可能为undefined.
2010-01-01
javascript textarea支持图形编辑
本来以为只有iframe支持编辑了，今天突然发现textarea也支持编辑：（是不是我太愚钝了？ textarea不能用innerHTML来插入html，而用appendChild
2008-09-09
通过ifame指向的页面高度调整iframe的高度
[红色]通过ifame指向的页面高度调整iframe的高度...
2006-10-10
一个很简单的办法实现TD的加亮效果.
一个很简单的办法实现TD的加亮效果....
2006-09-09
比较平滑的js控制textaera的高度
textarea高度控制代码
2008-07-07
表单JS弹出填写提示效果代码
表单JS弹出填写提示效果代码，需要的朋友可以参考下。
2011-04-04
js下拉框里超过变成省略号
select超出一定长度则变成省略号
2008-05-05
JavaScript检查表单是否为空的函数
JavaScript检查表单是否为空的函数...
2007-11-11