仿密码框提示语
完成效果如下:
默认
失去焦点
三位失去焦点
正确格式
//css代码 div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; } .wrong { color: red; } .right{ color: green; } //html代码 <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> //js代码 // 1.获取元素 var ipt = document.querySelector('.ipt') var message = document.querySelector('.message') // 2.注册事件 失去焦点 ipt.onblur = function() { if(this.value.length < 6|| this.value.length > 16){ message.className = 'message wrong' message.innerHTML = '密码位数必须6~16位' }else{ message.className = 'message right' message.innerHTML = '您输入的密码正确' } }