Skip to main content
 首页 » 编程设计

JS控制密码等级

2022年07月15日59shihaiming

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>

本文参考链接:https://www.cnblogs.com/wulicute-TS/p/12102565.html