JavaScript-158：仿新浪注册页面

结构

    <div class="register">
        <input type="password" id="ipt">
        <p class="m">请输入6~16位密码</p>
    </div>

样式

        div {
            width: 600px;
            margin: 100px auto;
        }

        .m {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .a {
            color: red;
        }

        .b {
            color: green;
        }

JS

        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息
        // 因为里面变化样式较多，我们采取className修改样式

        //选中
        var ipt = document.getElementById('ipt');
        var m = document.querySelector('.m');
        //失去焦点onblur事件
        ipt.onblur = function ()
        {
            //判断表单里输入的不满6位数或超过16位  value文本/length长度
            if (ipt.value.length < 6 || ipt.value.length > 16)
            {
                m.className = 'm a';
                m.innerHTML = '你输入密码不满6位或超过16位数';
            } else
            {
                m.className = 'm b';
                m.innerHTML = '输入正确';
            }
        }