JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法

更新時(shí)間：2021年05月06日 11:41:34 作者：流楚丶格念

這篇文章主要介紹了JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

展示

設(shè)計(jì)

密碼強(qiáng)弱度分析

密碼由數(shù)字,字母,特殊符號(hào)組成

密碼: 只有數(shù)字- 或者是只有字母,或者是只有特殊符號(hào)——1級(jí)：弱
兩兩組合: 數(shù)字和字母, 數(shù)字和特殊符號(hào), 字母和特殊符號(hào)——2級(jí)：中
三者都有: 數(shù)字和字母和特殊符號(hào)——3級(jí)：強(qiáng)

代碼

版本一：基本

<!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>密碼強(qiáng)度：</b>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>
<script>
  function my$(id) {
      return document.getElementById(id);
  }

<script>


 //獲取文本框注冊(cè)鍵盤抬起事件
 my$("password").onkeyup=function () {
   //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色
   //如果密碼的長(zhǎng)度是小于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";
   }


 };

 //給我密碼,我返回對(duì)應(yīng)的級(jí)別
 function getLvl(password) {
   var lvl=0;//默認(rèn)是0級(jí)
   //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào)
   if(/[0-9]/.test(password)){
     lvl++;
   }
   //判斷密碼中有沒有字母
   if(/[a-zA-Z]/.test(password)){
     lvl++;
   }
   //判斷密碼中有沒有特殊符號(hào)
   if(/[^0-9a-zA-Z_]/.test(password)){
     lvl++;
   }
   return lvl;//1  3
 }

</script>
</body>
</html>

上面代碼有點(diǎn)冗余，我們對(duì)其進(jìn)行升級(jí)改寫

版本二：升級(jí)

<!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>密碼強(qiáng)度：</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);
  }
  //獲取文本框注冊(cè)鍵盤抬起事件
  my$("password").onkeyup=function () {
    //每次鍵盤抬起都要獲取文本框中的內(nèi)容,驗(yàn)證文本框中有什么東西,得到一個(gè)級(jí)別,然后下面的div顯示對(duì)應(yīng)的顏色
    my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

  //給我密碼,我返回對(duì)應(yīng)的級(jí)別
  function getLvl(password) {
    var lvl=0;//默認(rèn)是0級(jí)
    //密碼中是否有數(shù)字,或者是字母,或者是特殊符號(hào)
    if(/[0-9]/.test(password)){
      lvl++;
    }
    //判斷密碼中有沒有字母
    if(/[a-zA-Z]/.test(password)){
      lvl++;
    }
    //判斷密碼中有沒有特殊符號(hào)
    if(/[^0-9a-zA-Z_]/.test(password)){
      lvl++;
    }
    return lvl;//最小的值是1,最大值是3
  }


</script>
</body>
</html>

到此這篇關(guān)于JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript正則密碼強(qiáng)弱度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: