//首先判断事件是表单失去焦点 onblur
35 //如果输入正确提示的信息颜色为绿色小图标
36 //如说输入的不是6-16位则提示错误信息颜色为红色 小图标变化
37 //因为里面的变化样式较多 我们采取className修改样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 div {
9 width: 600px;
10 margin: 100px auto;
11 }
12 .message {
13 display: inline-block;
14 font-size: 12px;
15 color: #999;
16 /* background: url(OIP.jpg) no-repeat left center; */
17 padding-left: 20px;
18 }
19 .wrong {
20 color: red;
21 /* background: url(th.jpg) no-repeat left center; */
22 }
23 .right {
24 color: green;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="register">
30 <input type="password" class="input" >
31 <p class="message">请输入6-16位密码</p>
32 </div>
33 <script>
34 //首先判断事件是表单失去焦点 onblur
35 //如果输入正确提示的信息颜色为绿色小图标
36 //如说输入的不是6-16位则提示错误信息颜色为红色 小图标变化
37 //因为里面的变化样式较多 我们采取className修改样式
38 //1.获取元素
39 var input = document.querySelector('.input');
40 var message = document.querySelector('.message');
41 //2.注册事件
42 input.onblur = function() {
43 // 根据表单里面值的长度 input.value
44 if(this.value.length < 6 || this.value.length >16)
45 {
46 console.log('错误');
47 message.className = 'wrong message';
48 message.innerHTML = '您输入的位数不对要求 6-16位';
49
50 }else{
51 message.className = 'right message';
52 message.innerHTML = '您输入正确';
53 }
54 }
55 </script>
56 </body>
57 </html>
