仿新浪密码框验证信息

m_0_1_0_1

已于 2022-03-26 11:37:44 修改

阅读量64

点赞数

分类专栏： Dom 文章标签： javascript

于 2022-03-26 11:37:08 首次发布

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123752692

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：首先获取事件源，然后判断是什么事件-->表单失去交单onblur。根据输入框里面值的长度来判断用户输入的是否正确。然后通过className（样式内容比较多时使用）来更改元素的样式，innerHTML来修改元素内容。（使用className来修改样式时，若原来也有样式，则会覆盖原有的样式，可以在原有样式的后面加空格再加上新的类名，则可以保留原有的样式）

<!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>
        *{
       margin:0;
       padding:0;
         }
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
        }
        
        .wrong {
            color: red;
        }
        
        .right {
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt" />
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
        var ipt = document.querySelector(".ipt");
        var message = document.querySelector(".message");
        ipt.onblur = function() {
            if (this.value.length < 6 || this.value.length > 12) {
                message.className = "message wrong";
                message.innerHTML = "您输入错误";
            } else {
                message.className = "message right";
                message.innerHTML = "您输入正确";
            }
        };
    </script>
</body>

</html>

m_0_1_0_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿新浪密码框验证信息

思路：首先获取事件源，然后判断是什么事件-->表单失去交单onblur。根据输入框里面值的长度来判断用户输入的是否正确。然后通过className来更改元素的样式，innerHTML来修改元素内容。（使用className来修改样式时，若原来也有样式，则会覆盖原有的样式，可以在原有样式的后面加空格再加上新的类名，则可以保留原有的样式）<!DOCTYPE html><html lang="en"><head> <meta charset=.
复制链接

扫一扫