HTML:
<body> <div class="box"> <input type="text" maxlength="16" placeholder="密码" id="password" /> <div class="level_0" id="level"></div> </div> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </body>
CSS:
.box { width: 300px; height: 60px; margin: 50px auto; } .box input { width: 100%; height: 40px; margin-bottom: 5px; padding-left: 10px; padding-right: 10px; border: 1px solid #E0E0E0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } .level_0 { width: 100%; height: 15px; background-color: #FFF; } .level_1 { width: 33.33%; height: 15px; background-color: red; } .level_2 { width: 66.66%; height: 15px; background-color: orange; } .level_3 { width: 100%; height: 15px; background-color: green; }
js：
document.getElementById("password").onkeyup = function() { document.getElementById("level").className = "level_" + (this.value.length >= 6 ? getLevel(this.value) : 0); }; function getLevel(value) { var level = 0; if(/[0-9]/.test(value)) { level++; } if(/[a-zA-z]/.test(value)) { level++; } if(/[^0-9a-zA-Z_]/.test(value)) { level++; } return level; }
效果图：
