Jquery密码强度验证控件

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>

你可能感兴趣的:(JS和JQuery)