javascript制作密码验证框 -- 案例

效果图

html代码

<div>
    设置密码: <input type="password" value="" class="ipt">
    <p class="message">请输入6-16位密码</p>
</div>

css代码

    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            display: none;
            color: #999999;
            font-size: 12px;
            background: url("img/1.png") no-repeat left center;
            padding-left: 20px;
        }

        .messages {
            color: red;
            background: url("img/2.png") no-repeat left center;
            background-size: 18px 18px;
        }

        .mes {
            color: green;
            background: url("img/3.png") no-repeat left center;
            background-size: 18px 18px;
        }
    </style>

js代码

   <script>
        //获取input标签
        var ipt = document.querySelector('input')
        //获取p标签
        var p = document.querySelector('p')
        //绑定获取焦点事件函数(onfocus)
        ipt.onfocus = function () {
            p.style.display = 'inline-block'
        }
         //绑定失去焦点事件函数(onblur)
        ipt.onblur = function () {
         //判断输入框内字符长度是否大于6位小于16位
            if (ipt.value.length < 6 || ipt.value.length > 16) {
                p.className = 'message messages'
                p.innerHTML = '格式错误'
            } else {
                p.className = 'message mes'
                p.innerHTML = '格式正确'
            }
        }
    </script>