<html>
<input type="password" class="pwd" />
<p class="message">请输入6~16位的密码</p>
</html>
<script>
// 获取元素
var a = document.querySelector(".pwd");
var b = document.querySelector(".message");
// 失去焦点事件
a.onblur = function () {
//判断密码长度小于6或者大于16提示错误
if (this.value.length < 6 || this.value.length > 16) {
b.className = "message wrong"; //更换p标签的样式,这样写是为了保留原本的样式不被替换
b.innerHTML = "❌输入的位数不对哦,请输入6~16位的密码"; //更换p标签的内容
} else {
b.className = "message right";
b.innerHTML = "√ 输入正确";
}
};
</script>
<style>
.message {
display: inline-block;
}
.wrong {
color: red;
}
.right {
color: green;
}
</style>
效果图: