javascript密码强度校验代码（两种方法）

时间：2021-05-26

先看效果图：

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('&nbsp;'); $('#middle').html('&nbsp;'); $('#strength').html('&nbsp;'); $('#weak').css({backgroundColor:''}); $('#middle').css({backgroundColor:''}); $('#strength').css({backgroundColor:''}); }}</script>

以上通过两种方法介绍了javascript密码强度校验代码，希望对大家有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章