//首先判断事件是表单失去焦点 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 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>