<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>密码框验证信息</title>
<style>
div{
width:600px;
margin:100px auto;
}
.message{
display:inline-block;
font-size:12px;
color:#999;
backgrond:url(btn1.png) no-repeat left center;
padding-left:20px;
}
.error{
color:red;
backgrond:url(btn2.png) no-repeat left center;
}
.right{
color:green;
}
</style>
</head>
<body>
<div>
<input type="password" class="ipt">
<p class="message">请输入6-16位密码</p>
</div>
<script>
var ipt=document.querySelector(".ipt");
var message=document.querySelector(".message");
ipt.onblur=function(){
if(this.value.length<6||this.value.length>16){
message.className="message error";
message.innerHTML="输入密码位数不对";
}else{
message.className="message right";
message.innerHTML="输入正确";
}
}
</script>
</body>
</html>
密码框验证信息
最新推荐文章于 2022-09-16 09:47:14 发布