Jquery密码强度验证控件

来源：互联网发布：铁幕演说知乎编辑：程序博客网时间：2024/05/17 22:32
Jquery密码强度验证控件

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <script type="text/javascript" src="jquery-1.12.1.js"></script>        <style type="text/css">            .mainPrompt {                border: #999 solid 1px;                border-radius: 13px;                overflow: hidden;                padding: 1px 2px;                display: inline-block;                height: 20px;            }            .listPrompt {                float: left;                height: 20px;                width: 56px;                margin-right: 2px;                background-color: #eeeeee;            }            .bot_text span {                width: 52px;                text-align: center;                display: inline-block;                line-height: 18px;            }        </style>    </head>    <body>        <br/>        <div>            <p id="PromptMessage" style="margin-left: 200px;">                    新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>            <input type="text" id="txtPassword" style="float: left;"/ placeholder="请输入密码">            <div style="margin-left: 30px;font-size: 12px;float: left;">                <div class="mainPrompt" align="center" bgcolor="#f5f5f5">                    <div class="listPrompt" id="strength_L" style="border-radius: 8px 0px 0px 8px;">                    </div>                    <div class="listPrompt" id="strength_M">                    </div>                    <div class="listPrompt" id="strength_H" style="margin-right: 0px;border-radius: 0 8px 8px 0;">                    </div>                </div>                <div class="bot_text">                    <span id="lowStrength">低</span> <span id="midStrength">                        中</span> <span id="highStrength">高</span>                </div>            </div>        <div>        <script type="text/javascript">            function JudgyPwdLevel(pwdStr) {                var hasNumber = 0;                var hasLetter = 0;                var hasSymbol = 0                if (pwdStr.length >= 6) {                    for (var i = 0; i < pwdStr.length; i++) {                        var item = pwdStr[i];                        if (item >= '0' && item <= '9') { hasNumber = 1; }                        else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; }                        else { hasSymbol = 1; }                    }                }                return hasLetter + hasNumber + hasSymbol;            }            //显示颜色              function pwStrength(pwd) {                O_color = "#eeeeee";                L_color = "#FF0000";                M_color = "#FF9900";                H_color = "#33CC00";                if (pwd == null || pwd == '') {                    Lcolor = Mcolor = Hcolor = O_color;                }                else {                    S_level = JudgyPwdLevel(pwd);                    switch (S_level) {                        case 0:                            Lcolor = Mcolor = Hcolor = O_color;                        case 1:                            Lcolor = L_color;                            Mcolor = Hcolor = O_color;                            break;                        case 2:                            Lcolor = L_color;                            Mcolor = M_color;                            Hcolor = O_color;                            break;                        default:                            Lcolor = L_color;                            Mcolor = M_color;                            Hcolor = H_color;                    }                }                document.getElementById("strength_L").style.background = Lcolor;                document.getElementById("strength_M").style.background = Mcolor;                document.getElementById("strength_H").style.background = Hcolor;                return;            }            $("#txtPassword").keyup(function(e){              pwStrength($(e.target).val());            });        </script>    </body></html>
0 0