javascript验证码

最新推荐文章于 2024-09-07 13:38:28 发布
JakeWangL
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量677
点赞数
分类专栏： java web 文章标签： javascript border email ie opera url
java web 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
转贴自《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、输入复杂的数字、字母等：
JakeWangL
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript验证码

转贴自《java综合网》将下文代码保存成html页面即可查看效果HTML> HEAD> TITLE>javascript验证码TITLE> META NAME="Description" CONTENT="javascript验证码，验证输入密码的强弱"> script type="text/javascript
复制链接

扫一扫
专栏目录