網頁|含有密碼強度的註冊頁面
- 2019 年 12 月 24 日
- 筆記
問題描述
隨著互聯網科技的迅速發展，人們對於互聯網的依賴性卻來越強。各種帳號密碼出現在人們生活的方方面面。為了提高密碼的安全性，很多人都會設置一些複雜的密碼。有的網站、app在用戶註冊的時候也會顯示密碼的破譯困難等級，以此來提醒客戶設置更加複雜的密碼。如下圖所示，就是我們常見的提示密碼強度的效果：
圖1.1 顯示效果
解決方案
密碼強度提示效果很明顯需要用到css樣式以及js進行進一部的設置。我們今天要實現的效果大概如圖2.1所示。
圖2.1 最終效果
整個頁面中的重點就是右側的用戶登錄部分。但是這個部分其實也不是太難，表單框架用form表單就可以完成，其他的內容也就不一一介紹了。這裡唯一需要詳細介紹的應該就是今天的密碼強度提示效果了。密碼強度提示主要是通過匹配數字，字母以及匹配除數字字母外的特殊符號來實現的。這裡我們就需要用到css來進行匹配，相關的程式碼如下：
|
<script type="text/javascript"> function CheckIntensity(pwd) { var Mcolor, Wcolor, Scolor, Color_Html; var m = 0; //匹配數字 if (/d+/.test(pwd)) { debugger; m++; }; //匹配字母 if (/[A-Za-z]+/.test(pwd)) { m++; }; //匹配除數字字母外的特殊符號 if (/[^0-9a-zA-Z]+/.test(pwd)) { m++; }; if (pwd.length <= 6) { m = 1; } if (pwd.length <= 0) { m = 0; } switch (m) { case 1: Wcolor = "pwd pwd_Weak_c"; Mcolor = "pwd pwd_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "弱"; break; case 2: Wcolor = "pwd pwd_Medium_c"; Mcolor = "pwd pwd_Medium_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "中"; break; case 3: Wcolor = "pwd pwd_Strong_c"; Mcolor = "pwd pwd_Strong_c"; Scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; Color_Html = "強"; break; default: Wcolor = "pwd pwd_c"; Mcolor = "pwd pwd_c pwd_f"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "無"; break; } document.getElementById('pwd_Weak').className = Wcolor; document.getElementById('pwd_Medium').className = Mcolor; document.getElementById('pwd_Strong').className = Scolor; document.getElementById('pwd_Medium').innerHTML = Color_Html; } </script> |
|---|
對於上述程式碼，其中debugger 語句用於停止執行 JavaScript，並調用 (如果可用) 調試函數。使用 debugger 語句類似於在程式碼中設置斷點。
上面的程式碼是這樣執行的，首先遍歷並找到匹配的 case，如果沒有匹配（我們這個例子就是沒有匹配的）則執行 default，但此時 default 中不存在 break，所以程式又沿著程式碼繼續往下走了。
此外，在匹配過程中我們還用到了正則表達式——/[^0-9a-zA-Z]+/。js正則是在雙正斜杠之中起作用的。其中方括弧表示範圍，^有非的意思。如：[1233]查找方括弧之間的任何字元,而[^1233]則表示查找任何不在方括弧之間的字元。相關具體內容參考下圖：
圖2.2 js進階正則表達式
結語
在實現這個含有顯示密碼強度的頁面過程中，調試各各部分的位置花了很多時間。特別是密碼強度顯示條的位置最開始一直在嘗試使用外鏈css樣式進行調試，但是一直都沒有任何效果，最後還是用行內樣式進行設置才起了作用。關於這一點還有些疑問，對於外鏈樣式和行內樣式的設置可能還有點問題。
END
實習編輯 | 王楠嵐
責 編 | 劉 連
