<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.prom{
color: #999;
font-size: 12px;
padding-left: 20px;
background: url("mess.png") no-repeat;
}
.wrong{
color: red;
background: url("wrong.png") no-repeat;
}
.right{
color: green;
background: url("right.png") no-repeat;
}
</style>
</head>
<body>
<div>
<input type="password" id="pwd">
<span class="prom">请输入6~16位密码</span>
</div>
<script>
//获取元素对象
var pwd = document.getElementById(‘pwd‘);
var prom = document.querySelector(‘.prom‘);
//注册事件 程序处理
pwd.onchange = function(){
if(this.value.length > 16 || this.value.length < 6){
//采用className修改样式
prom.className="prom wrong";
prom.innerHTML="您输入的位数不对";
}else{
prom.className="prom right";
prom.innerHTML="输入正确";
}
}
</script>
</body>
</html>