溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹JavaScript中怎么評估用戶輸入密碼的強度，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
原有代碼請查看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script type="text/javascript"> //CharMode函數 function CharMode(iN) { if (iN >=48&& iN <=57) //數字 return1; if (iN >=65&& iN <=90) //大寫字母 return2; if (iN >=97&& iN <=122) //小寫 return4; else return8; //特殊字符 } //bitTotal函數 function bitTotal(num) { modes =0; for (i =0; i <4; i++) { if (num &1) modes++; num >>>=1; } return modes; } //checkStrong函數 function checkStrong(sPW) { if (sPW.length <=4) return0; //密碼太短 Modes =0; for (i =0; i < sPW.length; i++) { Modes |= CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } //pwStrength函數 function pwStrength(pwd) { O_color ="#eeeeee"; L_color ="#FF0000"; M_color ="#FF9900"; H_color ="#33CC00"; if (pwd ==null|| pwd =='') { Lcolor = Mcolor = Hcolor = O_color; } else { S_level = checkStrong(pwd); switch (S_level) { case0: Lcolor = Mcolor = Hcolor = O_color; case1: Lcolor = L_color; Mcolor = Hcolor = O_color; break; case2: Lcolor = Mcolor = M_color; Hcolor = O_color; break; default: Lcolor = Mcolor = Hcolor = H_color; } document.getElementById("strength_L").style.background = Lcolor; document.getElementById("strength_M").style.background = Mcolor; document.getElementById("strength_H").style.background = Hcolor; return; } } </script> <form name="form1" action=""> 輸入密碼:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"> <br> 密碼強度: <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display: inline'> <tr align="center" bgcolor="#eeeeee"> <td width="33%" id="strength_L"> 弱 </td> <td width="33%" id="strength_M"> 中 </td> <td width="33%" id="strength_H"> 強 </td> </tr> </table> </form> </body> </html>首先我們來改善一下上面博友的驗證函數為如下代碼：
var PagePage = Page || {}; PagePage.Utility = Page.Utility || {}; PagePage.Utility.Registration = Page.Utility.Registration || {}; //獲取密碼強度 Page.Utility.Registration.getPasswordLevel = function (password) { if (password == null || password == '') return 0; if (password.length <= 4) return 0; //密碼太短 var Modes = 0; for (i = 0; i < password.length; i++) { Modes |= CharMode(password.charCodeAt(i)); } return bitTotal(Modes); //CharMode函數 function CharMode(iN) { if (iN >= 48 && iN <= 57) //數字 return 1; if (iN >= 65 && iN <= 90) //大寫字母 return 2; if (iN >= 97 && iN <= 122) //小寫 return 4; else return 8; //特殊字符 } //bitTotal函數 function bitTotal(num) { modes = 0; for (i = 0; i < 4; i++) { if (num & 1) modes++; num >>>= 1; } return modes; } };然后來創建View Model，但是引用Knockout之前，我們首先要引用Knockout的Js類庫（具體介紹請查看Knockout應用開發指南的系列教程）
View model代碼如下：
var viewModel = { Password: ko.observable(""), Ocolor: "#eeeeee" };對于密碼強度以及顏色的值依賴于密碼字符串的值，所以我們需要為他們聲明依賴屬性，代碼如下：
viewModel.PasswordLevel = ko.dependentObservable(function () { return Page.Utility.Registration.getPasswordLevel(this.Password()); }, viewModel); viewModel.Lcolor = ko.dependentObservable(function () { //根據密碼強度判斷***個格顯示的背景色 return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")) }, viewModel); viewModel.Mcolor = ko.dependentObservable(function () { //根據密碼強度判斷第二個格顯示的背景色 return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00") }, viewModel); viewModel.Hcolor = ko.dependentObservable(function () { //根據密碼強度判斷第三個格顯示的背景色 return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00" }, viewModel);然后使用applyBindings方法將view model綁定到該頁面，你可以使用jQuery的ready函數來執行該綁定代碼，也可以在頁面最下方執行綁定代碼，我們這里使用了jQuery，代碼如下：
$((function () { ko.applyBindings(viewModel); }));***，我們再看看這些值怎么動態綁定到HTML元素上的，請查看如下代碼（其中使用了afterkeydown代替了onKeyUp和onBlur）：
<form name="form1" action=""> 輸入密碼: <input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> <br> 密碼強度: <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display: inline'> <tr align="center" bgcolor="#eeeeee"> <td width="50"data-bind="style: { backgroundColor: Lcolor }">弱</td> <td width="50"data-bind="style: { backgroundColor: Mcolor }">中</td> <td width="50"data-bind="style: { backgroundColor: Hcolor }">強</td> </tr> </table> </form>然后就OK，運行代碼查看，一模一樣的功能展示出來了。
如果去掉為驗證而改善的代碼，總代碼肯定是比原有的方式少的。
完整版代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script> <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script> </head> <body> <script type="text/javascript"> var PagePage = Page || {}; PagePage.Utility = Page.Utility || {}; PagePage.Utility.Registration = Page.Utility.Registration || {}; //獲取密碼強度 Page.Utility.Registration.getPasswordLevel =function (password) { if (password ==null|| password =='') return0; if (password.length <=4) return0; //密碼太短 var Modes =0; for (i =0; i < password.length; i++) { Modes |= CharMode(password.charCodeAt(i)); } return bitTotal(Modes); //CharMode函數 function CharMode(iN) { if (iN >=48&& iN <=57) //數字 return1; if (iN >=65&& iN <=90) //大寫字母 return2; if (iN >=97&& iN <=122) //小寫 return4; else return8; //特殊字符 } //bitTotal函數 function bitTotal(num) { modes =0; for (i =0; i <4; i++) { if (num &1) modes++; num >>>=1; } return modes; } }; var viewModel = { Password: ko.observable(""), Ocolor: "#eeeeee" }; viewModel.PasswordLevel = ko.dependentObservable(function () { return Page.Utility.Registration.getPasswordLevel(this.Password()); }, viewModel); viewModel.Lcolor = ko.dependentObservable(function () { //根據密碼強度判斷***個格顯示的背景色 returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")) }, viewModel); viewModel.Mcolor = ko.dependentObservable(function () { //根據密碼強度判斷第二個格顯示的背景色 returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00") }, viewModel); viewModel.Hcolor = ko.dependentObservable(function () { //根據密碼強度判斷第二個格顯示的背景色 returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00" }, viewModel); $((function () { ko.applyBindings(viewModel); })); </script> <form name="form1" action=""> 輸入密碼:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> <br> 密碼強度: <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display: inline'> <tr align="center" bgcolor="#eeeeee"> <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }"> 弱 </td> <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }"> 中 </td> <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }"> 強 </td> </tr> </table> </form> </body> </html>關于JavaScript中怎么評估用戶輸入密碼的強度就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
