来自Google的密码强度Javascript验证代码

最新推荐文章于 2019-07-20 01:04:52 发布

weixin_33787529

最新推荐文章于 2019-07-20 01:04:52 发布

阅读量85

点赞数

文章标签： javascript ViewUI

本文介绍了一个用于实时评估用户输入密码强度的JavaScript实现方案。通过AJAX技术与后端交互，根据返回的评分更新UI，直观展示密码的安全等级。

先看看效果吧：

  1 < script type ="text/javascript" >
  2 var agt = navigator.userAgent.toLowerCase();
  3 var is_op = (agt.indexOf( " opera " ) != - 1 );
  4 var is_ie = (agt.indexOf( " msie " ) != - 1 ) && document.all && ! is_op;
  5 var is_ie5 = (agt.indexOf( " msie 5 " ) != - 1 ) && document.all && ! is_op;
  6
  7 function CreateXmlHttpReq(handler) {
  8    var xmlhttp = null ;
  9    if (is_ie) {
10      var control = (is_ie5) ? " Microsoft.XMLHTTP " : " Msxml2.XMLHTTP " ;
11      try {
12       xmlhttp = new ActiveXObject(control);
13       xmlhttp.onreadystatechange = handler;
14     } catch (ex) {
15       alert( " You need to enable active scripting and activeX controls " );
16     }
17
18   } else {
19     xmlhttp = new XMLHttpRequest();
20     xmlhttp.onload = handler;
21     xmlhttp.onerror = handler;
22   }
23    return xmlhttp;
24 }
25
26
27 function XmlHttpPOST(xmlhttp, url, data) {
28    try {
29     xmlhttp.open( " POST " , url, true );
30     xmlhttp.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded; charset=UTF-8 " );
31     xmlhttp.send(data);
32
33   } catch (ex) {
34      // do nothing
35   }
36 }
37
38
39 var myxmlhttp;
40 ratingMsgs = new Array( 6 );
41 ratingMsgColors = new Array( 6 );
42 barColors = new Array( 6 );
43
44 ratingMsgs[ 0 ] = " 太短 " ;
45 ratingMsgs[ 1 ] = " 弱 " ;
46 ratingMsgs[ 2 ] = " 一般 " ;
47 ratingMsgs[ 3 ] = " 很好 " ;
48 ratingMsgs[ 4 ] = " 极佳 " ;
49 ratingMsgs[ 5 ] = " 未评级 " ;
50
51 ratingMsgColors[ 0 ] = " #676767 " ;
52 ratingMsgColors[ 1 ] = " #aa0033 " ;
53 ratingMsgColors[ 2 ] = " #f5ac00 " ;
54 ratingMsgColors[ 3 ] = " #6699cc " ;
55 ratingMsgColors[ 4 ] = " #008000 " ;
56 ratingMsgColors[ 5 ] = " #676767 " ;
57
58 barColors[ 0 ] = " #dddddd " ;
59 barColors[ 1 ] = " #aa0033 " ;
60 barColors[ 2 ] = " #ffcc33 " ;
61 barColors[ 3 ] = " #6699cc " ;
62 barColors[ 4 ] = " #008000 " ;
63 barColors[ 5 ] = " #676767 " ;
64
65 function CreateRatePasswdReq ()
66 {
67 var passwd = getElement('Passwd').value;
68 var email = getElement('Email').value;
69 var lastname = getElement('LastName').value;
70 var firstname = getElement('FirstName').value;
71 var min_passwd_len = 6 ;
72
73
74 if (passwd.length < min_passwd_len)
75 {
76    if (passwd.length > 0 )
77   {
78     DrawBar( 0 );
79   }
80    else
81   {
82     ResetBar();
83   }
84 }
85 else
86 {
87     passwd = escape(passwd);
88      var params = 'Passwd = ' + passwd + ' & Email = ' + email + ' & FirstName = ' + firstname + ' & LastName = ' + lastname;
89     myxmlhttp = CreateXmlHttpReq(RatePasswdXmlHttpHandler);
90     XmlHttpPOST(myxmlhttp, " https://www.google.com/accounts/RatePassword " , params);
91 }
92 }
93
94 function getElement(name)
95 {
96    if (document.all)
97   {
98        return document.all(name);
99   }
100    return document.getElementById(name);
101 }
102
103 function RatePasswdXmlHttpHandler()
104 { // Can't check status since safari doesn't support it
105    if (myxmlhttp.readyState != 4 )
106   {
107    return ;
108   }
109   rating = parseInt(myxmlhttp.responseText);
110   DrawBar(rating);
111 }
112
113 function DrawBar(rating)
114 {
115 var posbar = getElement('posBar');
116 var negbar = getElement('negBar');
117 var passwdRating = getElement('passwdRating');
118 var barLength = getElement('passwdBar').width;
119
120 if (rating >= 0 && rating <= 4 )
121 {        // We successfully got a rating
122     posbar.style.width = barLength / 4 * rating + " px " ;
123     negbar.style.width = barLength / 4 * ( 4 - rating) + " px " ;
124 }
125 else
126 {
127     posbar.style.width = " 0px " ;
128     negbar.style.width = barLength + " px " ;
129     rating = 5 ; // Not rated Rating
130 }
131 posbar.style.background = barColors[rating]
132 passwdRating.innerHTML = " <font color=' " + ratingMsgColors[rating] + " '> " + ratingMsgs[rating] + " </font> " ;
133 }
134
135
136    // Resets the password strength bar back to its initial state without any message showing.
137    function ResetBar()
138   {
139      var posbar = getElement('posBar');
140      var negbar = getElement('negBar');
141      var passwdRating = getElement('passwdRating');
142      var barLength = getElement('passwdBar').width;
143
144     posbar.style.width = " 0px " ;
145     negbar.style.width = barLength + " px " ;
146     passwdRating.innerHTML = "" ;
147   }
148
149 </ script >
150
151 < table width ="60%"   border ="0" >
152      < tr >
153          < td width ="30%" >
154              < input type ="hidden" value ="" id ="FirstName" size ="30" >
155              < input type ="hidden" value ="" id ="LastName" size ="30" >
156              < input type ="hidden" id ="Email" value ="" size ="30" >
157              < input type ="password" id ="Passwd" value ="" onkeyup ="CreateRatePasswdReq()" size ="30" >
158          </ td >
159          < td width ="70%" >
160              < table cellpadding ="0" cellspacing ="0" border ="0" >
161                  < tr >
162                      < td width ="200" id ="passwdBar" >
163                          < table cellpadding ="0" cellspacing ="0" border ="0" >
164                              < tr >
165                                  < td nowrap valign ="top"   height ="15px" >< font color ="#808080" size ="-1" face ="Arial, sans-serif" >< div id ="passwdRating" ></ div ></ font ></ td >
166                              </ tr >
167                              < tr >
168                                  < td height ="3px" ></ td >
169                              </ tr >
170                              < tr >
171                                  < td colspan ="2" >
172                                      < table cellpadding ="0" bgcolor ="#ffffff" cellspacing ="0" border ="0" width ="200" >
173                                          < tr >
174                                              < td width ="0%" id ="posBar" bgcolor ="#e0e0e0" height ="4px" ></ td >
175                                              < td width ="100%" id ="negBar" bgcolor ="#e0e0e0" height ="4px" ></ td >
176                                          </ tr >
177                                      </ table >
178                                  </ td >
179                              </ tr >
180                          </ table >
181                      </ td >
182                  </ tr >
183              </ table >
184          </ td >
185      </ tr >
186 </ table >
187

转自： http://www.cnblogs.com/anjou/archive/2006/11/16/563032.html