html
<input type="text" id='password' placeholder="密码" /> <div id='intension'> <div>弱</div> <div>中</div> <div>强</div> </div>
css
<style> #intension div { background-color: gray; width: 80px; height: 20px; text-align: center; line-height: 20px; margin: 5px; float: left; } #intension { width: 270px; margin-left: 40px } #password { width: 300px; height: 30px; font-size: 18px; } #intension .active { background-color: pink } </style>
js
<script> var oPassword = document.getElementById("password"); var oDiv = document.getElementById("intension"); var nodes = oDiv.getElementsByTagName("div"); oPassword.onkeyup = function () { var oValue = oPassword.value; for (var i = 0; i < nodes.length; i++) { nodes[i].className = ''; } if (/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)) { nodes[2].className = "active"; } else if (/^\d+$/.test(oValue) || /^[A-Z]+$/.test(oValue) || /^[a-z]+$/.test(oValue)) { nodes[0].className = "active"; } else { nodes[1].className = "active"; } } </script>
本文参考链接:https://www.cnblogs.com/wulicute-TS/p/12102565.html