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

先看看效果吧：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
</head>

<body>
<script type="text/javascript">
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all && !is_op;

function CreateXmlHttpReq(handler) {
  var xmlhttp = null;
  if (is_ie) {
    var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
    try {
      xmlhttp = new ActiveXObject(control);
      xmlhttp.onreadystatechange = handler;
    } catch (ex) {
      alert("You need to enable active scripting and activeX controls"); 
    }

  } else {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = handler;
    xmlhttp.onerror = handler;
  }
  return xmlhttp;
}

function XmlHttpPOST(xmlhttp, url, data) {
  try {
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlhttp.send(data);

  } catch (ex) {
    // do nothing
  }
}

var myxmlhttp;
ratingMsgs = new Array(6);
ratingMsgColors = new Array(6);
barColors = new Array(6);

ratingMsgs[0] = "太短";
ratingMsgs[1] = "弱";
ratingMsgs[2] = "一般";
ratingMsgs[3] = "很好";
ratingMsgs[4] = "极佳";
ratingMsgs[5] = "未评级";

ratingMsgColors[0] = "#676767";
ratingMsgColors[1] = "#aa0033";
ratingMsgColors[2] = "#f5ac00";
ratingMsgColors[3] = "#6699cc";
ratingMsgColors[4] = "#008000";
ratingMsgColors[5] = "#676767";

barColors[0] = "#dddddd";
barColors[1] = "#aa0033";
barColors[2] = "#ffcc33";
barColors[3] = "#6699cc";
barColors[4] = "#008000";
barColors[5] = "#676767";

function CreateRatePasswdReq ()
{
var passwd = getElement('Passwd').value;
var email = getElement('Email').value;
var lastname = getElement('LastName').value;
var firstname = getElement('FirstName').value;
var min_passwd_len = 6;

if (passwd.length < min_passwd_len) 
{
  if (passwd.length > 0)
  {
    DrawBar(0);
  }
  else
  {
    ResetBar();
  }
}
else
{
    passwd = escape(passwd);
    var params = 'Passwd='+passwd+'&Email='+email+'&FirstName='+firstname+'&LastName='+lastname;
    myxmlhttp = CreateXmlHttpReq(RatePasswdXmlHttpHandler);
    XmlHttpPOST(myxmlhttp, "https://www.google.com/accounts/RatePassword", params);
}
}

function getElement(name)
{
  if (document.all)
  {
      return document.all(name);
  }
  return document.getElementById(name);
}

function RatePasswdXmlHttpHandler()
{ // Can't check status since safari doesn't support it
  if (myxmlhttp.readyState != 4)
  {
  return;
  }
  rating = parseInt(myxmlhttp.responseText);
  DrawBar(rating);
}

function DrawBar(rating)
{
var posbar = getElement('posBar');
var negbar = getElement('negBar');
var passwdRating = getElement('passwdRating');
var barLength = getElement('passwdBar').width;

if (rating >= 0 && rating <= 4)
{       //We successfully got a rating
    posbar.style.width = barLength / 4 * rating + "px";
    negbar.style.width = barLength / 4 * (4 - rating) + "px";
}
else
{
    posbar.style.width = "0px";
    negbar.style.width = barLength + "px";
    rating = 5; // Not rated Rating
}
posbar.style.background = barColors[rating]
passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] +"'>" + ratingMsgs[rating] + "</font>";
}

  //Resets the password strength bar back to its initial state without any message showing.
  function ResetBar()
  {
    var posbar = getElement('posBar');
    var negbar = getElement('negBar');
    var passwdRating = getElement('passwdRating');
    var barLength = getElement('passwdBar').width;

    posbar.style.width = "0px";
    negbar.style.width = barLength + "px";
    passwdRating.innerHTML = "";
  }

</script>

<table width="60%"  border="0">
    <tr>
        <td width="30%">
            <input type="hidden" value="" id="FirstName" size="30">
            <input type="hidden" value="" id="LastName" size="30">
            <input type="hidden" id="Email" value="" size="30">
            <input type="password" id="Passwd" value="" onkeyup="CreateRatePasswdReq()" size="30">
        </td>
        <td width="70%">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="200" id="passwdBar">
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td nowrap valign="top"  height="15px"><font color="#808080" size="-1" face="Arial, sans-serif"><div id="passwdRating"></div></font></td>
                            </tr>
                            <tr>
                                <td height="3px"></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <table cellpadding="0" bgcolor="#ffffff" cellspacing="0" border="0" width="200">
                                        <tr>
                                            <td width="0%" id="posBar" bgcolor="#e0e0e0" height="4px"></td>
                                            <td width="100%" id="negBar" bgcolor="#e0e0e0" height="4px"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

Tags:

About this entry

You’re currently reading “来自Google的密码强度Javascript验证代码 收藏,” an entry on AUG Team

Published:
2009-1-22 17:3:0
Category:
JS
Views: