【密码强度验证】(html,css,js)

最新推荐文章于 2024-09-13 09:10:07 发布

王猫粮

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量384

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_70684059/article/details/129806379

版权

该代码示例展示了一个HTML表单，其中包含一个文本输入框和三个表示密码强度的标签。使用JavaScript监听输入事件，通过正则表达式检查输入内容，匹配数字、小写字母和特殊字符来判断密码强度，并相应地改变标签的背景色以显示强度级别。

摘要由CSDN通过智能技术生成

<style>
    *{
        margin: 0;
        padding: 0;
    }
    form{
        margin: 50px auto;
        border: 2px solid black;
        width: 400px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    form>label>input{
        width: 300px;
        height: 30px;
        color: black;
    }
    form>p>span{
        display: inline-block;
        justify-content: space-between;
        text-align: center;
        line-height: 30px;
        width: 90px;
        height: 30px;
        margin: 5px 5px;
        background-color: rgb(201, 199, 199);
        border-radius: 5px;
    }
form>p>span:nth-child(1).active{
    background-color: red;
}
form>p>span:nth-child(2).active{
    background-color: orange;
}
form>p>span:nth-child(3).active{
    background-color: green;
}
</style>
<body>
    <form>
        <label>
            <input type="text">
        </label>
        <p>
            <span>弱</span>
            <span>中</span>
            <span>强</span>
        </p>
    </form>
    <script>
         var oinput=document.querySelector("input")
         var reg1=/\d/
         var reg2=/[a-z]/i
         var reg3=/[!@#$%^&*()?]/
         var ospan=document.querySelectorAll("span")
        oinput.oninput=function(evt){
            // console.log(this.value)
            var level=0
            if(reg1.test(this.value)) level++
            if(reg2.test(this.value)) level++
            if(reg3.test(this.value)) level++
            console.log(level)
            for(var i=0;i<ospan.length;i++){
                ospan[i].classList.remove("active")
                if(i<level){
                    ospan[i].classList.add("active")
                }
            }
        }
    </script>
</body>