js实战案例--密码框格式提示错误信息

最新推荐文章于 2022-10-29 20:44:16 发布

某不知名代码搬运工

最新推荐文章于 2022-10-29 20:44:16 发布

阅读量2.5k

点赞数 2

文章标签：物联网人工智能前端 js

本文链接：https://blog.csdn.net/m0_50357382/article/details/123850754

版权

js实战案例–密码框格式提示错误信息

要求：用户如果离开密码框，里面输入的个数不是6~16，则提示错误信息，否则提示输入正确信息。

请添加图片描述在这里插入图片描述

<!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{
        margin: 100px auto;
        width: 400px;
    }
    .message{
        display: inline-block;/*不独占一行*/
        color: #ccc;
        font-size: 12px;
        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>
        <input type="password" class="pwd">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var pwd = document.querySelector('.pwd');
        var message = document.querySelector('.message');
        pwd.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>