JS（javascript）入门：密码输入框中所输入的不规范内容如何在一旁提示出来并要求重新输入？

输入框中的内容不符合要求，怎么提示出来并要求重新输入？

• 获取失去焦点应用
• if语句应用
• 元素样式操作应用

最终效果图：

css部分，可根据自己的个人喜好设置

 #one,
        #two {
            float: left;
        }

        #two {
            width: 150px;
            height: 32px;
            font-size: 12px;
            color: blue;
            padding-left: 5px;
            display: none;                   /*先隐藏默认的*/
        }

body部分

 <div id="one">
        <strong>密码：</strong><input type="password">
    </div>
    <div id="two">
        请输入密码
    </div>

js部分

<script>
                                                     //获取元素
        var input = document.querySelector('input');
        var div = document.getElementById('two');
                               //当获得和失去焦点时div的显示与隐藏
        input.onfocus = function () {               //获得焦点时
            div.style.display = 'block';
        }
        input.onblur = function () {                //失去焦点时
            if (input.value === '') {
                div.innerHTML = '!请设置密码';
                div.style.color = 'red';
            } else if (input.value.length < 6) {   //判断长度length
                div.innerHTML = 'ⓧ请输入不得小于6位的密码，请重输';
                div.style.color = 'red';
                input.value = '';                //可选择重置或不重置
            } else if (input.value.length > 12) {
                div.innerHTML = 'ⓧ请输入不得大于12位的密码，请重输';
                div.style.color = 'red';
                input.value = '';               //可选择重置或不重置
            } else {
                div.innerHTML = '√密码可用';
                div.style.color = '#18fd1d';
            }
        }

    </script>

有不懂的可以私信或留言哟