DOM操作-------密码框格式错误提示信息

DOM操作-------密码框格式错误提示信息

【案例】密码框格式错误提示信息
用户如果离开密码框，里面输入个数不是6-16，则提示错误信息，否则提示输入正确信息

【案例分析】

1：首先判断的事件是表单失去焦点onblur。
2: 如果输入正确则提示正确的信息，颜色为绿色的小图标变化。
3：如果输入的不是6到16位，则提示错误信息，颜色为红色小图标变化。
4：因为里面涉及的变化样式较多，使用我采用clasName修改样式。

【实战】

【CSS部分】

 <style>
    div{
        width: 600px;
        margin: 100px auto;
    }
    .message{
        display: inline-block;
        font-size: 12px;
        color:skyblue;
        background: url(error.png) no-repeat left center;
        padding-left: 20px;
    }
    //因为里面涉及的变化样式较多，使用我采用clasName修改样式。
    .wrong{
        color: red;
        background: url(red.png) no-repeat left center;
    }
    .right{
        color:rgb(18, 123, 165);
        background: url(rigth.png) no-repeat left center;
    }

    </style>

【HTML部分】

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

【JavaScript部分】

<script>
       //1:获取元素
       var ipt = document.querySelector(".ipt");
       var message = document.querySelector(".message");
       //2:绑定事件
       ipt.onblur = function(){
           //根据表单里面值的长度 ipt.value.lenth
           if(this.value.length>=6&&16>=this.value.length)
           {
               message.innerHTML = "输入格式正确";
               message.className = " message right";
           }else{
               message.className = " message wrong";
               message.innerHTML = "您输入的位数不对，要求6-16位";
           }
       }
   </script>

【效果展示】
1：初始时的样子：

2：输入正确后的样子

2：输入错误后的样子