js 密码框验证信息案例
一个小小的案例,可供初学者参考,我也是初学写的,此代码写的是一个密码框,当输入信息与设定格式不符时后面提示报错信息
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仿新浪注册页面</title>
<style>
.zhuce{
width:600px;
margin:100px auto;
}
.message{
display:inline-block;
font-size:12px;
color: #999;
background:url(images/k3.jpg) no-repeat left center;
padding-left:20px;
}
.wrong{
color: red;
background-image:url(images/aa1.jpg);
}
.right{
color: green;
background-image:url(images/aa2.jpg);
}
</style>
</head>
<body>
<div class="zhuce">
<input type="password" name="" class="ipt" value="注册提示">
<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 wrong';
message.innerHTML = '你输入的位数不对';
}
else {
message.className = 'message right';
message.innerHTML = '你输入的位数正确';
}
}
</script>
</body>
</html>