密码框格式错误

最新推荐文章于 2022-03-30 16:55:03 发布

6点就起床

最新推荐文章于 2022-03-30 16:55:03 发布

阅读量283

点赞数

文章标签： js

本文链接：https://blog.csdn.net/ygdwb/article/details/106085723

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 14px;
            color: #999;
            padding-left: 20px;
        }
        .wrong{
            color: red;
        }
        .right{
            color: green;
        }
    </style>
</head>
<body>
    <div class="register">
     输入用户名：<input type="text"><br>
       设置密码： <input type="password"  class="ipt">
       <p class="message">请输入8-10位密码</p> <br>
       <button>登录</button>
    </div>
    
    <script>
        //1.获取元素
        var ipt = document.querySelector('.ipt');
        var message =document.querySelector('.message');
        //2.注册事件 添加处理程序
        ipt.onblur = function(){  //失去焦点时
            //根据表达里面值的长度 ipt.value.length 是此时输入的密码长度
            if(this.value.length < 8 || this.value.length > 10){
            message.className = 'message wrong';
            message.innerHTML = '您输入的位数不对,请输入8-10位数';
        }else{
            message.className = 'message right';
            message.innerHTML = '正确';
        }

    }
    </script>
    
</body>
</html>

格式没弄好，不好看。

6点就起床

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
密码框格式错误

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ w
复制链接

扫一扫