WebAPIs注册页面

最新推荐文章于 2024-02-28 00:00:00 发布

一个想走出去的码农

最新推荐文章于 2024-02-28 00:00:00 发布

阅读量92

点赞数

分类专栏： WebAPIs 文章标签：前端

原文链接：https://blog.csdn.net/weixin_44412840/article/details/115704144

版权

WebAPIs 专栏收录该内容

1 篇文章 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>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            /* 设置为行内块元素 */
            display: inline-block;
            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>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var ip = document.querySelector('.ipt');
        var mess = document.querySelector('.message');
        //失去光标如果不是6-16位数 那么调用红色区域
        ip.onblur = function () {
            var l = this.value.length;
            if (l < 6 || l >= 16) {
                mess.className = 'message wrong';
                mess.innerHtml = '您输入的位数不对要求6~16位'
            } else {
                mess.className = 'message right';
                mess.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>