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

案例分析:

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

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

③如果输入不是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
posted on 2020-01-06 16:16  SailorM  阅读(286)  评论(0编辑  收藏  举报