模仿美团的美化
<!DOCTYPE> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="mima.css"> <script src="jquery-1.9.0.min.js"></script> <script src="MeForCopy.js"></script> </head> <body> <form name="form1" action=""> <input type="password" size="10" id="password"> <br> <div class="pw-strength"> <div id="J-pw-strength__bar" class="pw-strength__bar"></div> <div class="pw-strength__letter"> <span class="pw-strength__label">L</span> <span class="pw-strength__label">M</span> <span class="pw-strength__label pw-strength__label--noborder">H</span> </div> </div> <div id="msg"></div> </form> </body> </html>
JS
$(function() { $("#password").blur(function(event) { /* Act on the event */ var psw = $(this).val(); //okay pwStrength(psw); }); $("#password").keyup(function(event) { /* Act on the event */ var psw = $(this).val(); //okay pwStrength(psw); }); }); function pwStrength(psw) { if (psw == ‘‘) { $("#msg").text(‘no‘); $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘); } else { S_level = checkStrong(psw); switch (S_level) { case 0: $("#msg").text(‘no‘); $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘); case 1: $("#msg").text(‘weak‘); $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--weak‘); break; case 2: $("#msg").text(‘normal‘); $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--normal‘); break; default: $("#msg").text(‘Strong‘); $(".pw-strength__bar").removeAttr(‘class‘).addClass(‘pw-strength__bar‘).addClass(‘pw-strength__bar--strong‘); } } } 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); } //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; }
CSS
.pw-strength { background: none repeat scroll 0 0 #C9E0DD; left: 80px; position: absolute; top: 45px; width: 234px; } .pw-strength__bar { background: none repeat scroll 0 0 #C9E0DD; height: 16px; overflow: hidden; width: 0; -moz-transition: all 0.4s linear 0s; transition: all .4s linear; -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear; } .pw-strength__letter { left: 0; position: absolute; top: 0; } .pw-strength__bar--normal { background: none repeat scroll 0 0 #F1D93A; width: 154px; } .pw-strength__bar--weak { background: none repeat scroll 0 0 #EA9292; width: 76px; } .pw-strength__bar--strong { background: none repeat scroll 0 0 #5AAC47; width: 232px; } .pw-strength__label { border-right: 2px solid #FFFFFF; color: #FFFFFF; display: block; float: left; font-size: 12px; height: 16px; line-height: 16px; text-align: center; width: 76px; }