操作元素之密码框验证信息+操作元素的总结

案例分析：

①首先判断的事件是表单失去焦点；

②如果输入正确则提示正确的信息颜色为绿色小图标变化；

③如果输入不是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