jQuery 회원 가입 시 비밀번호 강도 알림 정보 기능 예시

본 고 는 jQuery 가 회원 가입 을 실현 할 때 암호 강도 알림 정보 기능 을 실례 로 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.효 과 는 그림 과 같다.

2.html 코드:

<p><span>    ：</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>
<span id="password1_bg" class="bg_rt" style="display:none"></span>
</p>
<p class="mima_qd" id="password1_strength" style="display:none">
 <span class="mm_strength"><em>    </em>
   <i class="password_qd">
    <span class="password_bg" id="strength_L"></span>
    <span class="password_bg" id="strength_M"></span>
    <span class="password_bg" id="strength_H"></span>
   </i>
  <em id="pw_check_info"></em>
</span>
</p>
<p class="tishi_wr" id="password1_info"></p>

3.jquery 코드:

//checkStrong  
//         
function checkStrong(sPW){
  if (sPW.length<=4)
    return 0; //    
    var Modes=0;
  for (i=0;i<sPW.length;i++){
    //                     .
    //charCodeAt():  unicode    
    Modes|=CharMode(sPW.charCodeAt(i)); //           
  }
  return bitTotal(Modes);//                 
}
//CharMode  
//            .
function CharMode(iN){
  if (iN>=48 && iN <=57) //  
    return 1;
  if (iN>=65 && iN <=90) //    
    return 2;
  if (iN>=97 && iN <=122) //  
    return 4;
  else
    return 8; //    
}
//bitTotal  
//                 
function bitTotal(num){
  var modes=0;
  for (i=0;i<4;i++){
    if (num & 1) modes++;
    num>>>=1;
  }
  return modes;
}
//pwStrength  
//                  ,              
function pwStrength(pwd){
  var O_color="#eeeeee";
  var L_color="#FF4040";
  var M_color="#FF9900";
  var H_color="#33CC00";
  var info = "";
  if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
  } else {
    S_level=checkStrong(pwd);//       
    switch(S_level) {
       case 0:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = " ";
         break;
       case 1:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = " ";
         break;
       case 2:
         Lcolor=Mcolor=M_color;
         Hcolor=O_color;
         info = " ";
         break;
       default:
         Lcolor=Mcolor=Hcolor=H_color;
         info = " ";
       }
     }
   $("#strength_L").css("background", Lcolor);
   $("#strength_M").css("background", Mcolor);
   $("#strength_H").css("background", Hcolor);
   $("#pw_check_info").html(info);//        
   return;
}

PS:여기 서 여러분 께 참고 하여 사용 할 수 있 도록 관련 온라인 도 구 를 두 가지 더 제공 합 니 다.
암호 보안 온라인 검색:
http://tools.jb51.net/password/my_password_safe
고강도 암호 생 성기:
http://tools.jb51.net/password/CreateStrongPassword
온라인 무 작위 숫자/문자열 생 성 도구:
http://tools.jb51.net/aideddesign/suijishu
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.