案例6 密码框格式提示错误信息

案例

//密码框验证信息，当输入密码时，密码的标准不满足我们的要求，就要在后面显示提示的信息。
//案例分析：
//首先判断的时间是表单是去焦点onblur
//如果输入正确则提示正确的信息颜色为绿色小图标变化
//如果输入不是6到16位，那就提示密码错误的字样

<div class="register">
          <input type="password">
          <p class="message">请输入6-16位的密码</p>
     </div>
     <script>
          // 1，获取元素
          var input=document.querySelector('input');
          var msg=document.querySelector('.message');
          // 2,注册事件 失去焦点
          input.onblur=function(){
               if(this.value.length<6||this.value.length>16){
                   msg.className='message wrong';  
                   msg.innerHTML('你输入的位数不对，要求6-16位，请重新输入');
               }else{
                    msg.className='message right';
                    msg.innerHTML='你输入的正确';
               }     
          }
</script>