利用JavaScript來實現用動態檢驗密碼強度

平時咱們會在某些網站的註冊頁面或者更改密碼的頁面發現當咱們輸入密碼時，會有一個相似於進度條的長條進行提示用戶輸入的密碼強度。以下圖：

我看到有些人用幾張不一樣的圖片來替換，這樣彷佛能夠，可是不太好。因此我經過其餘方式實現。

實質上這是根據用戶輸入的不一樣密碼強度來改變 顏色區域的長度。

密碼強度這個橫條實質是一個div，其餘標記也能夠，div裏面有一個span標記，我就是經過改變span的長度和顏色來表現密碼的強度的。原理很簡單，可是在操做過程當中，可能會遇到一些問題很頭疼。

1.先在html頁面裏面定義一個輸入框用於輸入密碼，一個一個div，在div裏面放一個span標籤而且設置相應的屬性，type，name，value，class，id等

1 <font color="#FF0000">*</font>密碼：<input type="text" name="password" id="password" value="請輸入密碼"  onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">很多於6位字符</font><br/>
2 密碼強度：<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2.給標籤設置相應的css，來控制標籤的樣式，使其感受漂亮一點：

 1 <style type="text/css">
 2     /*用於修飾密碼強度條外邊框div*/
 3     .pwdStrongth{
 4         border:solid 1px #000000;
 5         border-radius:5px;
 6         height:15px;
 7         width:150px;}
 8     /*用於設置span標籤的初始樣式*/
 9     .cinnerprogress{ 
10         display: block;
11           height: 100%;
12          background-color:transparent;
13           border-radius: 5px;
14           width: 100%;
15         }
16     /*下面四個將用於設置span標籤在不一樣密碼強度的樣式*/
17     .strengthLv1{  
18         display: block;
19           height: 100%;
20         border-radius: 5px;
21         background:red;width:25%;}
22     .strengthLv2{
23         display: block;
24           height: 100%;
25         border-radius: 5px;
26         background:orange;width:50%;}
27     .strengthLv3{
28         display: block;
29           height: 100%;
30         border-radius: 5px;
31         background:#09F;width:75%;}
32     .strengthLv4{
33         display: block;
34           height: 100%;
35         border-radius: 5px;
36         background:green;width:100%;}
37 </style>

3.寫相應的JavaScript方法經過檢測用戶輸入的密碼強度來調用不一樣的樣式來表現密碼強度，密碼強度的規則能夠本身隨意定義，只需在密碼輸入框的onblur（失去焦點）事件和onkeyup（按下鍵盤上來以後）事件調用下面的方法便可：

 1 function pwdComplex()//用於判斷密碼強度的
 2     {
 3         var pwdobj=document.getElementById("password"); //獲取密碼輸入框對象
 4         var pwdTip=document.getElementById("pwdTip");//獲取密碼提示文字對象
 5         var pwdprogress=document.getElementById("innerprogress"); //獲取span標籤對象
 6         var strongthTip=document.getElementById("strongthTip");//獲取密碼強度提示文字的對象
 7         var regxs = new Array();//定義一個數組用於存放不一樣的正則表達式
 8         regxs[0]=/[^a-zA-Z0-9_]/g;
 9         regxs[1]=/[a-z]/g;
10         regxs[2]=/[0-9]/g;
11         regxs[3]=/[A-Z]/g;
12         var val = pwdobj.value;//獲取用戶輸入的密碼
13         var len = val.length;//獲取用戶輸入的密碼長度
14         var sec = 0;         //定義一個變量用於存放密碼強度
15         if (len >= 6) //用於判斷用戶輸入的密碼強度
16         { // 至少六個字符
17             for (var i = 0; i < regxs.length; i++)  //遍歷全部正則表達式，檢測用戶輸入的密碼符合哪些正則表達式，若是符合則強度+1
18             {
19                 if (val.match(regxs[i])) 
20                 {
21                     sec++;
22                 }
23             }
24         }
25         if(sec==0) //經過不一樣的密碼強度調用不一樣的樣式
26         {
27             strongthTip.innerText="";
28              //setAttribute("class", "className")中class是指改變class這個屬性，因此要帶引號，className是span標籤的類名，也是對應的樣式名
29             pwdprogress.setAttribute("class","cinnerprogress");
30         }
31         else if(sec==1)
32         {
33             strongthTip.innerText="強度：弱";
34             strongthTip.style.color="red";
35             pwdprogress.setAttribute("class","strengthLv1");
36                 
37         }
38         else if(sec==2)
39         {
40             strongthTip.innerText="強度：中";    
41             strongthTip.style.color="orange";
42             pwdprogress.setAttribute("class","strengthLv2");
43             
44         }
45         else if(sec==3)
46         {
47             strongthTip.innerText="強度：強";    
48             strongthTip.style.color="#09F";
49             pwdprogress.setAttribute("class","strengthLv3");
50             
51         }
52         else if(sec==4)
53         {
54             strongthTip.innerText="強度：超強";    
55             strongthTip.style.color="green";
56             pwdprogress.setAttribute("class","strengthLv4");
57             
58         }
59     }

以上是完整的代碼，供你們學習和參考，如有錯誤或不足，請你們多多指教！！！