最近在做項目，需要更加輸入密碼自動顯示密碼強度（紅色：低，黃色：中，綠色：強）的功能，這里做下記錄
js腳本代碼
<script type="text/javascript">
//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;
}
//checkStrong函數
//返回密碼的強度級別
function checkStrong(sPW) {
//密碼長度
if (sPW.length <= 4)
return 0; //密碼太短
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 == '') {
//不用var聲明變量連=號連接賦值
Lcolor = Mcolor = Hcolor = O_color;
}
else {
//檢查字符串安全級別返回級別數據進行判斷
S_level = checkStrong(pwd);
//判斷密碼級別
switch (S_level) {
case 0:
//給每個變量賦顏色
Lcolor = Mcolor = Hcolor = O_color;
case 1:
//給每個變量賦顏色
Lcolor = L_color;
Mcolor = Hcolor = O_color;
break;
case 2:
//給每個變量賦顏色
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>
html 代碼
<form name="form1" action="" > <div style="width:280px; height: 300px; border-color: blue;"> 輸入密碼: <input type="password" size="20" onKeyUp="pwStrength(this.value);" onBlur="pwStrength(this.value);"/><br> 密碼強度: <div style="width:270px;height:5px;margin-top:5px;"> <!--效果1： 顯示對應長度及顏色 --> <div id="strength_L" style="width:80px;height:10px;float:left;border-right:6px solid #fff;"></div> <div id="strength_M" style="width:80px;height:10px;float:left;border-right:6px solid #fff;"></div> <div id="strength_H" style="width:80px;height:10px;float:left;border-right:0px solid #fff;"></div> <!--效果2： 顯示對應文字、長度及顏色 --> <!-- <div id="strength_L" style="width:80px;height:30px;float:left;border-right:6px solid #fff;text-align: center; border:1px solid bisque;">低</div> <div id="strength_M" style="width:80px;height:30px;float:left;border-right:6px solid #fff;text-align: center;border:1px solid bisque;">中</div> <div id="strength_H" style="width:80px;height:30px;float:left;border-right:0px solid #fff;text-align: center;border:1px solid bisque;">高</div> --> </div> </div> </form>
效果1:
效果2：
整體Demo源碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>測試頁面</title> <script type="text/javascript"> //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; } //checkStrong函數 //返回密碼的強度級別 function checkStrong(sPW) { //密碼長度 if (sPW.length <= 4) return 0; //密碼太短 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 == '') { //不用var聲明變量連=號連接賦值 Lcolor = Mcolor = Hcolor = O_color; } else { //檢查字符串安全級別返回級別數據進行判斷 S_level = checkStrong(pwd); //判斷密碼級別 switch (S_level) { case 0: //給每個變量賦顏色 Lcolor = Mcolor = Hcolor = O_color; case 1: //給每個變量賦顏色 Lcolor = L_color; Mcolor = Hcolor = O_color; break; case 2: //給每個變量賦顏色 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> </head> <body> <form name="form1" action="" > <div style="width:280px; height: 300px; border-color: blue;"> 輸入密碼: <input type="password" size="20" onKeyUp="pwStrength(this.value);" onBlur="pwStrength(this.value);"/><br> 密碼強度: <div style="width:270px;height:5px;margin-top:5px;"> <!--效果1： 顯示對應長度及顏色 --> <!-- <div id="strength_L" style="width:80px;height:10px;float:left;border-right:6px solid #fff;"></div> <div id="strength_M" style="width:80px;height:10px;float:left;border-right:6px solid #fff;"></div> <div id="strength_H" style="width:80px;height:10px;float:left;border-right:0px solid #fff;"></div> --> <!--效果2： 顯示對應文字、長度及顏色 --> <div id="strength_L" style="width:80px;height:30px;float:left;border-right:6px solid #fff;text-align: center;border:1px solid bisque;">低</div> <div id="strength_M" style="width:80px;height:30px;float:left;border-right:6px solid #fff;text-align: center;border:1px solid bisque;">中</div> <div id="strength_H" style="width:80px;height:30px;float:left;border-right:0px solid #fff;text-align: center;border:1px solid bisque;">高</div> </div> </div> </form> </body> </html>