一、前言
每个公司几乎都会有一个公司的内部系统，每个员工的入职的的时候都会给开一个帐号，一般开帐号的这个人不会考虑帐号的安全性，用户名大多都是员工的姓名或者工号，密码也是姓名或者工号或者123456，如果可以输入123的话估计就设置123了，哈哈，那么问题就来了。如果这个员工不用这个系统不用这个系统或者不重置密码，很容易让别人登录的，导致公司内部的系统信息外泄，损失惨重。
最近公司的内部系统发现了异常，一些帐号在一些奇怪的地方登录，密码几乎大部分是弱密码，什么123456，123abc，654321，123654，自己姓名拼音，工号等等。
出现这样的问题一般是公司员工流动性大，负责人经常变动，开帐号和关闭帐号的人疏忽，员工自己没有安全意识，归根到底还是程序员没有把程序写好才造成的问题！！！
在网上经常看到密码的强度的验证的控件，感觉很好，下面这个控件可以借鉴基本效果如下：
二、基本实现
实现起来其实很简单，就是对输入的密码进行了验证，代码一个js文件，一个样式表，一个页面
checkIntensity.js
function CheckIntensity(pwd) { var mcolor, wcolor, scolor, colorHtml; //var pstrength = $(".passwordStrength"); var m = 0; var modes = 0; var i; for (i = 0; i < pwd.length; i++) { var charType; var t = pwd.charCodeAt(i); if (t >= 48 && t <= 57) { charType = 1; } else if (t >= 65 && t <= 90) { charType = 2; } else if (t >= 97 && t <= 122) { charType = 4; } else { charType = 8; } modes |= charType; } for (i = 0; i < 4; i++) { if (modes & 1) { m++; } modes >>>= 1; } if (pwd.length < 6) { m = 0; } //if (pwd.length <= 0) { m = 0; } switch (m) { case 1: //pstrength.find("span:first").addClass("bgStrength"); wcolor = "pwd pwd_Weak_c"; mcolor = "pwd pwd_c"; scolor = "pwd pwd_c pwd_c_r"; colorHtml = "弱"; break; case 2: //pstrength.find("span:lt(2)").addClass("bgStrength"); wcolor = "pwd pwd_Medium_c"; mcolor = "pwd pwd_Medium_c"; scolor = "pwd pwd_c pwd_c_r"; colorHtml = "中"; break; case 3: case 4: //pstrength.find("span:lt(3)").addClass("bgStrength"); wcolor = "pwd pwd_Strong_c"; mcolor = "pwd pwd_Strong_c"; scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; colorHtml = "强"; break; default: //pstrength.find("span").removeClass("bgStrength"); wcolor = "pwd pwd_c"; mcolor = "pwd pwd_c pwd_f"; scolor = "pwd pwd_c pwd_c_r"; colorHtml = ""; break; } document.getElementById('pwd_Weak').className = wcolor; document.getElementById('pwd_Medium').className = mcolor; document.getElementById('pwd_Strong').className = scolor; document.getElementById('pwd_Medium').innerHTML = colorHtml; if (m < 2) { $("#tdTip").show(); } else { $("#tdTip").hide(); } return m; }
样式表文件pwdIntensity.css
.pwd { width: 40px; height: 16px; line-height: 14px; padding-top: 2px; } .pwd_f { color: #BBBBBB; } .pwd_c { background-color: #F3F3F3; border-top: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; border-left: 1px solid #D0D0D0; } .pwd_Weak_c { background-color: #FF4545; border-top: 1px solid #BB2B2B; border-bottom: 1px solid #BB2B2B; border-left: 1px solid #BB2B2B; } .pwd_Medium_c { background-color: #FFD35E; border-top: 1px solid #E9AE10; border-bottom: 1px solid #E9AE10; border-left: 1px solid #E9AE10; } .pwd_Strong_c { background-color: #3ABB1C; border-top: 1px solid #267A12; border-bottom: 1px solid #267A12; border-left: 1px solid #267A12; } .pwd_c_r { border-right: 1px solid #D0D0D0; } .pwd_Weak_c_r { border-right: 1px solid #BB2B2B; } .pwd_Medium_c_r { border-right: 1px solid #E9AE10; } .pwd_Strong_c_r { border-right: 1px solid #267A12; } .pwd_table { border-collapse: collapse; } .pwd_table td { padding: 0; border: 0; text-align: center; border: 3px solid white; }
页面代码：
@{ ViewBag.Title = "Index"; } <h2>http://www.cnblogs.com/yinrq/</h2> <style> .updatePwd { padding: 10px 0; color: #666; } .updatePwd > p { margin-left: 20px; } .updatePwd dl dt { display: block; float: left; width: 100px; text-align: right; color: #333; } .updatePwd dl dd { margin-left: 120px; width: 250px; } .updatePwd dl { clear: both; display: block; padding: 8px 0; } .updatePwd dl:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .updatePwd .input { box-sizing: border-box; border: solid 1px #d2d9e2; height: 25px; width: 200px; /*padding-left: 65px;*/ border-radius: 3px; outline: none; font-size: 14px; color: #465767; /*margin-bottom: 20px;*/ } .updatePwd .input:focus { border-color: #3db6e4; } </style> <link href="/css/pwdIntensity.css" rel="stylesheet" /> <script type="text/javascript" src="/Script/checkIntensity.js"></script> <script type="text/javascript"> function checkSubmit() { var grade = CheckIntensity($("#txtNewPassword").val()); if (grade < 2) { alert("密码太简单！"); } else { alert("密码够复杂的！提交成功！"); } } </script> <div id="updatePwd" class="updatePwd"> <p> 您是首次登陆或密码已过期，请修改密码！ </p> <dl> <dt>用户名:</dt> <dd> <input id="txtUser" name="txtUser" class="input" value="yinrq" /> <span> </span> </dd> </dl> <dl> <dt>旧登录密码:</dt> <dd> <input id="txtOldPassword" name="txtOldPassword" class="input" type="password" /> <span style="color: red">*</span> </dd> </dl> <dl> <dt>新登录密码:</dt> <dd> <input id="txtNewPassword" name="txtNewPassword" class="input" type="password" onkeyup="CheckIntensity(this.value)" /> <span style="color: red">*</span> <div style="margin-top: 10px;"> <table class="pwd_table"> <tr> <td style="text-align: left;">密码强度</td> <td id="pwd_Weak" class="pwd pwd_c"> </td> <td id="pwd_Medium" class="pwd pwd_c pwd_f"> </td> <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td> </tr> <tr> <td colspan="4" >强度为中或者强才可以提交！</td> </tr> </table> </div> </dd> </dl> <dl> <dt>确认新密码:</dt> <dd> <input id="txtConfirmNewPassword" name="txtConfirmNewPassword" class="input" type="password" /> <span class="Validform_checktip" style="color: red">*</span> </dd> </dl> <dl> <dt></dt> <dd><input id="Sava" name="Sava" type="button" value="确认修改" onclick="return checkSubmit();" /></dd> </dl> </div>
代码在下面会提供下载，可以研究学习下，
https://yunpan.cn/cqRpBdWjsVraU （提取码：4e2c）
三、总结
1、密码要加强度验证
2、密码要根据配置文件的过期时间定期强制用户修改
3、系统安全人人有责
最好在上一张强制修改密码的图
