案例：密码框格式提⽰信息错误//⾸先判断事件是表单失去焦点 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;
input绑定onblur事件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.获取元素
39var input = document.querySelector('.input');
40var message = document.querySelector('.message');
41//2.注册事件
42        blur = function() {
43// 根据表单⾥⾯值的长度 input.value
44if(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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。