1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    8.         div{
    9.             width: 600px;
    10.             height: 100px atuo;
    11.         }
    13.         .message{
    14.             display: inline-block;
    15.             font-size: 12px;
    16.             color: #999;
    17.             padding-left: 20px;
    18.         }
    20.         .wrong{
    21.             color: red;
    22.         }
    24.         .right{
    25.             color: greenyellow;
    26.         }
    28.     </style>
    29.     <body>
    31.         <div class="register">
    32.             <input type="password" class="ipt">
    33.             <p class="message">请输入6~16位密码</p>
    35.         </div>
    37.         <script>
    38.             /*
    39.              * 案例分析：
    40.              * (1)首先判断的事件是表单失去焦点onblur
    41.              * (2)如果输入正确，就提示正确的信息颜色为绿色，
    42.              * (3)如果输入不是6到16位，则提示错误信息颜色为红色，
    43.              * (4)因为里面的变化样式较多，我们采取className修改样式
    44.              */
    45.             var ipt=document.querySelector("input");
    46.             var message=document.querySelector("p");
    48.             //注册事件，失去焦点
    49.             ipt.onblur=function(){
    50.                 if(this.value.length<6||this.value.length>16){
    51.                    message.className="message wrong";
    52.                    message.innerHTML="您输入的位数不对，要求是6~16位";                        
    53.                 }else{
    54.                     message.className="message right";
    55.                     message.innerHTML="您输入正确";
    56.                 }
    57.             }
    59.         </script>
    60.     </body>
    61. </html>