JavaScript 는 암호 의 강약 도 를 검증 하 는 방법 입 니 다.

5811 단어 JavaScript정칙암호 강약 도
전시 하 다.

설계 하 다.
암호 강약 도 분석
비밀 번 호 는 숫자,자모,특수 기호 로 구성 된다.
  • 비밀번호:숫자 만 있 거나 알파벳 만 있 거나 특수 기호 만 있 거나 1 급:약
  • 두 조합:숫자 와 자모,숫자 와 특수 기호,자모 와 특수 기호―2 급:중
  • 세 가 지 는 모두 숫자 와 자모 와 특수 기호―3 급:강
    • 이 있다.
    코드
    기본 기능
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/css">
  #dv{
    width: 300px;
    height:200px;
    position: absolute;
    left:100px;
    top:100px;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<div id="dv">
  <label for="password">  </label>
  <input type="text" id="password" maxlength="16">
  <div>
    <b>    ：</b>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script>
  function my$(id) {
      return document.getElementById(id);
  }

<script>


 //             
 my$("password").onkeyup=function () {
   //                 ,           ,      ,     div       
   //          6 ,      
   if(this.value.length>=6){
     var lvl=getLvl(this.value);
     if(lvl==1){
       // 
       my$("strengthLevel").className="strengthLv1";
     }else if(lvl==2){
       my$("strengthLevel").className="strengthLv2";
     }else if(lvl==3){
       my$("strengthLevel").className="strengthLv3";
     }else{
       my$("strengthLevel").className="strengthLv0";
     }
   }else{
     my$("strengthLevel").className="strengthLv0";
   }


 };

 //    ,        
 function getLvl(password) {
   var lvl=0;//   0 
   //        ,     ,       
   if(/[0-9]/.test(password)){
     lvl++;
   }
   //          
   if(/[a-zA-Z]/.test(password)){
     lvl++;
   }
   //            
   if(/[^0-9a-zA-Z_]/.test(password)){
     lvl++;
   }
   return lvl;//1  3
 }

</script>
</body>
</html>
    위의 코드 가 좀 지루 해서 우 리 는 그것 을 업그레이드 하고 고 쳤 다.
    업그레이드
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/css">
  #dv{
    width: 300px;
    height:200px;
    position: absolute;
    left:100px;
    top:100px;
  }
  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>
<body>
<div id="dv">
  <label for="password">  </label>
  <input type="text" id="password" maxlength="16"><!--    -->
  <div>
    <b>    ：</b>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<!-- <script src="common.js"></script> -->
<script>
  function my$(id) {
      return document.getElementById(id);
  }
  //             
  my$("password").onkeyup=function () {
    //                 ,           ,      ,     div       
    my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //    ,        
  function getLvl(password) {
    var lvl=0;//   0 
    //        ,     ,       
    if(/[0-9]/.test(password)){
      lvl++;
    }
    //          
    if(/[a-zA-Z]/.test(password)){
      lvl++;
    }
    //            
    if(/[^0-9a-zA-Z_]/.test(password)){
      lvl++;
    }
    return lvl;//     1,    3
  }


</script>
</body>
</html>
    자 바스 크 립 트 의 정규 암호 강약 도 를 검증 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 의 정규 암호 강약 도 에 관 한 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
    react 국제 화 react-intl 의 사용
    SQL 데이터베이스 구축 및 데이터베이스 삭제 명령

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage