先看效果圖：
javascript密碼強度校驗代碼，具體實現思路不多說了，請看下面代碼和demo。
第一種方法：
/* *密碼安全程度 *return ：全部為字母或者數字,或者密碼長度小于 *return : 字母數字組成，或者字母特殊字符，或者數字和特殊字符 *return : 字母和數字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) return ; var n = (this.search(/[a-zA-Z]/) != -) ? : , n = (this.search(/[-]/) != -) ? : , n =(this.search(/[/~/`/!/@/#/$/%/^/&/*/(/)/_/+/-/=/[/]|{/}/;/'/:/"/,/.///</>/?]{,}/) != -) ? : ; return n+n+n; }demo
<!doctype html> <html> <head> <meta charset="utf-"> <title>js密碼強度</title> <style type="text/css"> .pw_letter{ margin-top:px; font-size: px; } .pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;} .pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;} .pw_letter span.pw_strength_color{ background-color:green;} </style> </head> <body> <input id="password" type="password" name="password" placeholder="密碼" onKeyUp="setPasswordStrength(this.value.trim())"> <div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">強</span> </div> <script type="text/javascript"> /* *密碼安全程度 *return ：全部為字母或者數字,或者密碼長度小于 *return : 字母數字組成，或者字母特殊字符，或者數字和特殊字符 *return : 字母和數字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) return ; var n = (this.search(/[a-zA-Z]/) != -) ? : , n = (this.search(/[-]/) != -) ? : , n =(this.search(/[/~/`/!/@/#/$/%/^/&/*/(/)/_/+/-/=/[/]|{/}/;/'/:/"/,/.///</>/?]{,}/) != -) ? : ; return n+n+n; } String.prototype.trim = String.prototype.trim || function(){ return this.replace(/^/s+|/s+$/g,""); } function setPasswordStrength(pwd){ var strength_span = document.getElementsByClassName("strength"); for(var i=; i<strength_span.length; i++){ strength_span.item(i).className="strength"; } for(var i=; i<pwd.passwordStrength(); i++){ document.getElementsByClassName("strength").item(i).className="strength pw_strength_color"; } } </script> </body>第二種方法：
javascript代碼如下：
<script>function AuthPasswd(string) { if(string.length >=6) { if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && //W+/D+/.test(string)) { noticeAssign(1); }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || //W+/D+/.test(string)) { if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) { noticeAssign(-1); }else if(//[a-zA-Z]+/.test(string) && //W+/D+/.test(string)) { noticeAssign(-1); }else if(/[0-9]+/.test(string) && //W+/D+/.test(string)) { noticeAssign(-1); }else{ noticeAssign(0); } } }else{ noticeAssign(null); }}function noticeAssign(num) { if(num == 1) { $('#weak').css({backgroundColor:'#009900'}); $('#middle').css({backgroundColor:'#009900'}); $('#strength').css({backgroundColor:'#009900'}); $('#strength').html('很強'); $('#middle').html(''); $('#weak').html(''); }else if(num == -1){ $('#weak').css({backgroundColor:'#ffcc33'}); $('#middle').css({backgroundColor:'#ffcc33'}); $('#strength').css({backgroundColor:''}); $('#weak').html(''); $('#middle').html('中'); $('#strength').html(''); }else if(num ==0) { $('#weak').css({backgroundColor:'#dd0000'}); $('#middle').css({backgroundColor:''}); $('#strength').css({backgroundColor:''}); $('#weak').html('弱'); $('#middle').html(''); $('#strength').html(''); }else{ $('#weak').html(' '); $('#middle').html(' '); $('#strength').html(' '); $('#weak').css({backgroundColor:''}); $('#middle').css({backgroundColor:''}); $('#strength').css({backgroundColor:''}); }}</script>以上通過兩種方法介紹了javascript密碼強度校驗代碼，希望對大家有所幫助。
新聞熱點
疑難解答
