Password Level

最新推荐文章于 2024-05-21 15:44:27 发布

转载最新推荐文章于 2024-05-21 15:44:27 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/changweihua/archive/2011/12/04/2276231.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的密码强度检测功能。通过分析密码组成，包括数字、大小写字母及特殊字符等，来评估密码强度并用不同颜色展示弱、中、强三个等级。

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 <head>
  4     <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
  5     <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
  6     <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
  7 </head>
  8 <body>
  9     <script type="text/javascript">
 10 var Page = Page || {};
 11         Page.Utility = Page.Utility || {};
 12         Page.Utility.Registration = Page.Utility.Registration || {};
 13 
 14 //获取密码强度
 15         Page.Utility.Registration.getPasswordLevel =function (password) {
 16 if (password ==null|| password =='')
 17                 return0;
 18 
 19 if (password.length <=4)
 20                 return0; //密码太短
 21 
 22 var Modes =0;
 23 for (i =0; i < password.length; i++) {
 24                 Modes |= CharMode(password.charCodeAt(i));
 25             }
 26 return bitTotal(Modes);
 27 
 28 //CharMode函数 
 29 function CharMode(iN) {
 30 if (iN >=48&& iN <=57) //数字
 31 return1;
 32 if (iN >=65&& iN <=90) //大写字母
 33 return2;
 34 if (iN >=97&& iN <=122) //小写
 35 return4;
 36 else
 37                     return8; //特殊字符 
 38             }
 39 
 40 //bitTotal函数
 41 function bitTotal(num) {
 42                 modes =0;
 43 for (i =0; i <4; i++) {
 44 if (num &1) modes++;
 45                     num >>>=1;
 46                 }
 47 return modes;
 48             }
 49         };
 50 
 51 var viewModel = {
 52             Password: ko.observable(""),
 53             Ocolor: "#eeeeee"
 54         };
 55 
 56         viewModel.PasswordLevel = ko.dependentObservable(function () {
 57 return Page.Utility.Registration.getPasswordLevel(this.Password());
 58         }, viewModel);
 59 
 60         viewModel.Lcolor = ko.dependentObservable(function () {
 61 //根据密码强度判断第一个格显示的背景色
 62 returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))
 63         }, viewModel);
 64 
 65         viewModel.Mcolor = ko.dependentObservable(function () {
 66 //根据密码强度判断第二个格显示的背景色
 67 returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")
 68         }, viewModel);
 69 
 70         viewModel.Hcolor = ko.dependentObservable(function () {
 71 //根据密码强度判断第二个格显示的背景色
 72 returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"
 73         }, viewModel);
 74 
 75         $((function () {
 76             ko.applyBindings(viewModel);
 77         }));
 78 
 79        
 80 </script>
 81     <form name="form1" action="">
 82     输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
 83     <br>
 84     密码强度:
 85     <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
 86         height="23" style='display: inline'>
 87         <tr align="center" bgcolor="#eeeeee">
 88             <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">
 89                 弱
 90             </td>
 91             <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">
 92                 中
 93             </td>
 94             <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">
 95                 强
 96             </td>
 97         </tr>
 98     </table>
 99     </form>
100 </body>
101 </html>