密码格式提示错误信息
密码框得到的长度:pwd.value.length
使用className修改样式属性,是直接覆盖,所以需要写上你所需要的所有类名
<!-- css样式代码 -->
<style>
.box {
width: 600px;
margin: 200px auto;
}
.psw {
height: 25px;
}
.tishi {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 18px;
}
.worng {
background-image: url(images/wrong.png) no-repeat;
color: red;
}
.right {
background-image: url(images/right.png) no-repeat;
color: green;
}
</style>
<!-- 密码框格式提示错误信息 6-16位数 -->
<!-- html和js代码 -->
<div class="box">
密码:<input type="password" class="psw">
<p class="tishi"></p>
</div>
<script>
//获取事件源
var pwd = document.querySelector('.psw');
var tishi = document.querySelector('.tishi');
//绑定事件,执行程序
//当我输入完密码以后验证密码长度,也就是失去焦点以后
pwd.onblur = function () {
//对比长度,如何对比长度?
//根据表单里值的长度 pwd.value.length
if (this.value.length < 6 || this.value.length > 16) {
tishi.innerHTML = '密码长度请保持在6-16位';
tishi.className = 'tishi worng';
} else {
tishi.innerHTML = '密码格式正确';
tishi.className = 'tishi right'
}
}
</script>