转贴自《java综合网》
将下文代码保存成html页面即可查看效果
- <HTML>
- <HEAD>
- <TITLE>javascript验证码</TITLE>
- <META NAME="Description" CONTENT="javascript验证码,验证输入密码的强弱">
- <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) {}
- }
- 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() {
- 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) {
- 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;
- }
- posbar.style.background = barColors[rating]
- passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] +"'>" + ratingMsgs[rating] + "</font>";
- }
- 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>
- </HEAD>
- <BODY>
- <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>
效果如下图:
1、原始状态:
2、输入少于六个的字符:
3、输入六个及以上的纯阿拉伯数字:
4、输入简单组合的数字与字母组合:
5、输入复杂的数字、字母等: