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

核心提示： 1 <script type="text/javascript"> 2 var agt = navigator.userAgent.toLowerCase(); 3 var is_op = (agt.indexOf("Opera") != -1); 4 va

  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