DOM ------ 仿密码框提示语
2023-09-11 14:15:54 时间
仿密码框提示语
完成效果如下:
默认
失去焦点
三位失去焦点
正确格式
//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 = '您输入的密码正确'
}
}
this指向的是 ipt