JavaScript動態檢驗密碼強度的實現方法_javascript技巧

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

我看到有些人用幾張不同的圖片來替換，這樣似乎可以，但是不太好。所以我通過其他方式實現。

實質上這是根據使用者輸入的不同密碼強度來改變 顏色地區的長度。

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

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

<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，來控制標籤的樣式，使其感覺漂亮一點：

<style type="text/css">/*用於修飾密碼強度條外邊框div*/.pwdStrongth{border:solid 1px #000000;border-radius:5px;height:15px;width:150px;}/*用於設定span標籤的初始樣式*/.cinnerprogress{ display: block;height: 100%;background-color:transparent;border-radius: 5px;width: 100%;}/*下面四個將用於設定span標籤在不同密碼強度的樣式*/.strengthLv1{ display: block;height: 100%;border-radius: 5px;background:red;width:25%;}.strengthLv2{display: block;height: 100%;border-radius: 5px;background:orange;width:50%;}.strengthLv3{display: block;height: 100%;border-radius: 5px;background:#09F;width:75%;}.strengthLv4{display: block;height: 100%;border-radius: 5px;background:green;width:100%;}</style>

3.寫相應的JavaScript方法通過檢測使用者輸入的密碼強度來調用不同的樣式來表現密碼強度，密碼強度的規則可以自己隨意定義，只需在密碼輸入框的onblur（失去焦點）事件和onkeyup（按下鍵盤上來之後）事件調用下面的方法即可：

function pwdComplex()//用於判斷密碼強度的{var pwdobj=document.getElementById("password"); //擷取密碼輸入框對象var pwdTip=document.getElementById("pwdTip");//擷取密碼提示文字對象var pwdprogress=document.getElementById("innerprogress"); //擷取span標籤對象var strongthTip=document.getElementById("strongthTip");//擷取密碼強度提示文字的對象var regxs = new Array();//定義一個數組用於存放不同的Regexregxs[0]=/[^a-zA-Z0-9_]/g;regxs[1]=/[a-z]/g;regxs[2]=/[0-9]/g;regxs[3]=/[A-Z]/g;var val = pwdobj.value;//擷取使用者輸入的密碼var len = val.length;//擷取使用者輸入的密碼長度var sec = 0; //定義一個變數用於存放密碼強度if (len >= 6) //用於判斷使用者輸入的密碼強度{ // 至少六個字元for (var i = 0; i < regxs.length; i++) //遍曆所有Regex，檢測使用者輸入的密碼符合哪些Regex，如果符合則強度+1{if (val.match(regxs[i])) {sec++;}}}if(sec==0) //通過不同的密碼強度調用不同的樣式{strongthTip.innerText="";//setAttribute("class", "className")中class是指改變class這個屬性，所以要帶引號，className是span標籤的類名，也是對應的樣式名pwdprogress.setAttribute("class","cinnerprogress");}else if(sec==1){strongthTip.innerText="強度：弱";strongthTip.style.color="red";pwdprogress.setAttribute("class","strengthLv1");}else if(sec==2){strongthTip.innerText="強度：中"; strongthTip.style.color="orange";pwdprogress.setAttribute("class","strengthLv2");}else if(sec==3){strongthTip.innerText="強度：強"; strongthTip.style.color="#09F";pwdprogress.setAttribute("class","strengthLv3");}else if(sec==4){strongthTip.innerText="強度：超強"; strongthTip.style.color="green";pwdprogress.setAttribute("class","strengthLv4");}}

以上所述是小編給大家介紹的JavaScript動態檢驗密碼強度的實現方法,實現一個類比後台資料登入的效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！