案例分析：
①首先判断的事件是表单失去焦点；
②如果输入正确则提示正确的信息颜色为绿色小图标变化；
③如果输入不是6到16位，则提示错误信息为红色小图标变化；
④因为里面变化样式较多，我们采取className修改样式。
效果：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 .register{ 11 width: 500px; 12 margin: 200px auto; 13 } 14 .message{ 15 display: inline-block; 16 font-size: 12px; 17 color: #999; 18 background: url(img/mess.png) no-repeat left center; 19 padding-left: 20px; 20 } 21 .wrong{ 22 color: red; 23 background: url(img/wrong.png) no-repeat left center; 24 } 25 .right{ 26 color: green; 27 background: url(img/right.png) no-repeat left center; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="register"> 33 <input type="password" class="ipt"> 34 <p class="message">请输入6-16位密码</p> 35 </div> 36 <script> 37 //1.获取元素 38 var ipt=document.querySelector(".ipt"); 39 var message=document.querySelector(".message"); 40 //2.注册事件 41 ipt.onblur=function(){ 42 //根据表单里面值的长度 43 if(this.value.length<6 || this.value.length>12){ 44 message.className="message wrong"; //可以保留未更改的样式 45 message.innerHTML="输入错误"; 46 }else{ 47 message.className="message right"; 48 message.innerHTML="输入正确"; 49 } 50 } 51 </script> 52 </body> 53 </html>
操作元素总结：
| 操作元素 | 操作元素内容 | innerText |
| innerHTML | ||
| 操作常见元素属性 | src、href、title、alt等 | |
| 操作表单元素属性 | type、value、disabled等 | |
| 操作元素样式属性 | element.style | |
| className |