代码如下（大佬勿喷）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
div{ text-align: center; margin-top: 100px;}
input{ color: #000; outline: none;}
.span{ font-size: 14px; color: #999999; margin: 0 0 0 10px; user-select: none;}
.wrong{ color: red;}
.right{ color: green;}
</style>
</head>
<body>
<div>
<input type="text" />
<span class="span">* 请输入6~16位密码</span>
</div>
<script>
// 1. 获取元素
var input = document.querySelector("input");
var span = document.querySelector("span");
// 2. 注册事件 失去焦点
input.onblur = function(){
// 根据表单里面值得长度 input.value.length
if (this.value.length <6 || this.value.length >16){
span.innerHTML = "× 输入错误，请重新输入！";
span.className = "span wrong";
}else{
span.innerHTML = "√ 输入正确";
span.className = "span right";
}
}
</script>
</body>
</html>