快捷導(dǎo)航

javascript密碼強度校驗代碼（兩種方法）

更新時間：2015年08月10日 11:54:51 作者：xiaomou2014

為了保證網(wǎng)站個人信息的安全，很多網(wǎng)站在注冊頁面都設(shè)置密碼強度這項，用javascript如何實現(xiàn)密碼強度校驗代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強度校驗代碼，有需要的朋友可以參考下

先看效果圖：

javascript密碼強度校驗代碼，具體實現(xiàn)思路不多說了，請看下面代碼和demo。

第一種方法：

/*
 *密碼安全程度 
 *return ：全部為字母或者數(shù)字,或者密碼長度小于
 *return : 字母數(shù)字組成，或者字母特殊字符，或者數(shù)字和特殊字符
 *return : 字母和數(shù)字和特殊字符
 */
 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 ：全部為字母或者數(shù)字,或者密碼長度小于
 *return : 字母數(shù)字組成，或者字母特殊字符，或者數(shù)字和特殊字符
 *return : 字母和數(shù)字和特殊字符
 */
 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密碼強度校驗代碼，希望對大家有所幫助。

您可能感興趣的文章: