<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>div {
width: 600px;
margin: 100pxauto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;background: url(images/mess.png) no-repeatleftcenter;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style></head><body><divclass="register"><inputtype="password"class="ipt"><pclass="message">请输入6~16位密码</p></div><script>vaript=document.querySelector('.ipt');
varmessage=document.querySelector('.message');
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='您输入的正确';
}
}
</script></body></html>
