24-密码框重复验证信息.html

最新推荐文章于 2024-08-13 10:40:16 发布

程序员阿登

最新推荐文章于 2024-08-13 10:40:16 发布

阅读量131

点赞数

分类专栏： js 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_73605639/article/details/129082487

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 600px;
        margin: 100px auto;
    }
    
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    
    .wrong {
        color: red;
        background-image: url(images/wrong.png);
    }
    
    .right {
        color: green;
        background-image: url(images/right.png);
    }
</style>
<body>
    <div class="register">
    <input type="password" class="ipt">
    <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
     var ipt =document.querySelector('.ipt')
     var message=document.querySelector('.message')
     ipt.onblur = function()
     {
        if(this.value.length<6||this.value.length>16)
        {
            message.className='message wrong'
            message.innerHTML='您输入的位数不对 要求6~16位'
        }
        else{
            message.className='message right'
            message.innerHTML='您输入的正确'
        }
     }
    </script>

</body>
</html>