我们在进行系统开发时,特别是在做用户账户注册功能开发时,经常会有提示用户输入的注册账户密码强弱的提示功能需求,以方便指导用户设置一个密码强度合适的密码。这个功能一般都是用js在前端实现的,今天我们就用jQuery实现一个判断用户密码强弱的功能代码示例。
第一步:引入jQuery,我这边用的是baidu的1.11.3版本,你们可以直接如下面这样引用,也可以自己下载到本地后,从本地项目添加引用
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
第二步:设置简单的CSS效果
<style type="text/css"> body { margin:0; padding:0; font-size:16px; } form { margin:0 auto; width:305px; transition:all 1s ease-out 0s; } input { font-size:16px; height:25px; width:280px; margin-top:20px; color:#333; outline:none; border-radius:5px; border:1px solid #ccc; } input:focus { border:1px solid #09f; } p { display:inline-block; font-size:12px; color:#ccc; margin:0; margin-right:6px; } span { display:none; width:42px; font-size:12px; margin-left:2px; color:#ccc; background:#ccc; text-align:center; } span.ruo { background:#f00; color:#fff; opacity:0.5; } span.zo { background:rgb(255,224,0); opacity:1; color:#fff; } span.qiang { background:rgb(3,146,3); color:#fff; } </style>
第三步:核心的js算法
<script type="text/javascript"> var pawd = document.querySelector('#pawd'); var state = '弱'; //模拟密码强度判断 pawd.onkeyup = function () { var regStr = /[a-zA-Z]/; //所有字母 var regNum = /[0-9]/; //所有数字 var sup = /\W/; //所有非字母数字 if (this.value.length >= 1) { ruo.style.display = "inline-block"; ruo.className = "ruo"; ruo.innerHTML = "弱"; zo.style.display = "inline-block"; zo.className = ""; qiang.style.display = "inline-block"; qiang.className = ""; state = "弱"; } var sn = this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value); var sp = this.value.length >= 1 && regStr.test(this.value) && sup.test(this.value); var np = this.value.length >= 1 && regNum.test(this.value) && sup.test(this.value); if (sn || sp || np) { ruo.className = "zo"; ruo.innerHTML = " "; zo.className = "zo"; zo.innerHTML = "中"; state = "中"; } if (this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value) && sup.test(this.value)) { ruo.className = "qiang"; ruo.innerHTML = " "; zo.className = "qiang"; zo.innerHTML = " "; qiang.className = "qiang"; qiang.innerHTML = "强"; state = "强"; } if (this.value.length < 1) { ruo.style.display = "inline-block"; ruo.className = ""; ruo.innerHTML = "弱"; zo.style.display = "inline-block"; zo.className = ""; qiang.style.display = "inline-block"; qiang.className = ""; } } </script>
看一下完整的html代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>检查密码强弱-duidaima.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> body { margin:0; padding:0; font-size:16px; } form { margin:0 auto; width:305px; transition:all 1s ease-out 0s; } input { font-size:16px; height:25px; width:280px; margin-top:20px; color:#333; outline:none; border-radius:5px; border:1px solid #ccc; } input:focus { border:1px solid #09f; } p { display:inline-block; font-size:12px; color:#ccc; margin:0; margin-right:6px; } span { display:none; width:42px; font-size:12px; margin-left:2px; color:#ccc; background:#ccc; text-align:center; } span.ruo { background:#f00; color:#fff; opacity:0.5; } span.zo { background:rgb(255,224,0); opacity:1; color:#fff; } span.qiang { background:rgb(3,146,3); color:#fff; } </style> </head> <body> <form action="" autocomplete="off"> <input type="password" name="" id="pawd" placeholder="密码"><img src="" alt=""><br> <p>数字字符字母区分密码强弱</p><span id="ruo" style="display:inline-block">弱</span><span id="zo" style="display:inline-block">中</span><span id="qiang" style="display:inline-block">强</span><br> </form> <script> var pawd = document.querySelector('#pawd'); var state = '弱'; //模拟密码强度判断 pawd.onkeyup = function() { var regStr = /[a-zA-Z]/; //所有字母 var regNum = /[0-9]/; //所有数字 var sup = /\W/; //所有非字母数字 if (this.value.length >= 1) { ruo.style.display = "inline-block"; ruo.className = "ruo"; ruo.innerHTML = "弱"; zo.style.display = "inline-block"; zo.className = ""; qiang.style.display = "inline-block"; qiang.className = ""; state = "弱"; } var sn = this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value); var sp = this.value.length >= 1 && regStr.test(this.value) && sup.test(this.value); var np = this.value.length >= 1 && regNum.test(this.value) && sup.test(this.value); if (sn || sp || np) { ruo.className = "zo"; ruo.innerHTML = " "; zo.className = "zo"; zo.innerHTML = "中"; state = "中"; } if (this.value.length >= 1 && regStr.test(this.value) && regNum.test(this.value) && sup.test(this.value)) { ruo.className = "qiang"; ruo.innerHTML = " "; zo.className = "qiang"; zo.innerHTML = " "; qiang.className = "qiang"; qiang.innerHTML = "强"; state = "强"; } if (this.value.length < 1) { ruo.style.display = "inline-block"; ruo.className = ""; ruo.innerHTML = "弱"; zo.style.display = "inline-block"; zo.className = ""; qiang.style.display = "inline-block"; qiang.className = ""; } } </script> </body> </html>