密码等级

html

<input type="text" id='password' placeholder="密码" />
    <div id='intension'>
        <div>弱</div>
        <div>中</div>
        <div>强</div>
    </div>

css

<style>
    #intension div {
        background-color: gray;
        width: 80px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        margin: 5px;
        float: left;
    }

    #intension {
        width: 270px;
        margin-left: 40px
    }

    #password {
        width: 300px;
        height: 30px;
        font-size: 18px;
    }

    #intension .active {
        background-color: pink
    }
</style>

js

<script>
    var oPassword = document.getElementById("password");
    var oDiv = document.getElementById("intension");
    var nodes = oDiv.getElementsByTagName("div");
    oPassword.onkeyup = function () {
        var oValue = oPassword.value;

        for (var i = 0; i < nodes.length; i++) {
            nodes[i].className = '';
        }

        if (/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)) {
            nodes[2].className = "active";
        } else if (/^\d+$/.test(oValue) || /^[A-Z]+$/.test(oValue) || /^[a-z]+$/.test(oValue)) {
            nodes[0].className = "active";
        } else {
            nodes[1].className = "active";
        }

    } 
</script>