JavaScript判斷密碼強(qiáng)度(自寫(xiě)代碼)
更新時(shí)間：2013年09月06日 16:05:43 作者：
網(wǎng)站注冊(cè)的時(shí)候經(jīng)?？梢钥吹矫艽a強(qiáng)度提示，今天自己做了一個(gè)JS密碼強(qiáng)度判斷，具體實(shí)現(xiàn)如下，喜歡的朋友可以學(xué)習(xí)下
在一些網(wǎng)站注冊(cè)的時(shí)候經(jīng)?？梢钥吹矫艽a強(qiáng)度提示，例如優(yōu)酷：
今天自己做了一個(gè)JS密碼強(qiáng)度判斷，效果如下：
以下是代碼：
<html>
<head>
<title>JS判斷密碼強(qiáng)度</title>
<script language=javascript>
//判斷輸入密碼的類(lèi)型
function CharMode(iN){
if (iN>=48 && iN <=57) //數(shù)字
return 1;
if (iN>=65 && iN <=90) //大寫(xiě)
return 2;
if (iN>=97 && iN <=122) //小寫(xiě)
return 4;
else
return 8;
}
//bitTotal函數(shù)
//計(jì)算密碼模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}
//返回強(qiáng)度級(jí)別
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);
}
//顯示顏色
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) {
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="" >
<table width="250" border="0" cellpadding=2" bordercolor="#eeeeee" style='display:inline'>
<tr>
<td width="40%" align="right">密碼:</td>
<td colspan="3" align="left">
<input type=password size=20 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>
</td>
</tr>
<tr align="center">
<td width="40%" align="right">密碼強(qiáng)度:</td>
<td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td>
<td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td>
<td width="20%" id="strength_H" bgcolor="#f5f5f5">強(qiáng)</td>
</tr>
</table>
</form>
</body>
</html>
今天自己做了一個(gè)JS密碼強(qiáng)度判斷，效果如下：
以下是代碼：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS判斷密碼強(qiáng)度</title>
<script language=javascript>
//判斷輸入密碼的類(lèi)型
function CharMode(iN){
if (iN>=48 && iN <=57) //數(shù)字
return 1;
if (iN>=65 && iN <=90) //大寫(xiě)
return 2;
if (iN>=97 && iN <=122) //小寫(xiě)
return 4;
else
return 8;
}
//bitTotal函數(shù)
//計(jì)算密碼模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}
//返回強(qiáng)度級(jí)別
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);
}
//顯示顏色
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) {
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="" >
<table width="250" border="0" cellpadding=2" bordercolor="#eeeeee" style='display:inline'>
<tr>
<td width="40%" align="right">密碼:</td>
<td colspan="3" align="left">
<input type=password size=20 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>
</td>
</tr>
<tr align="center">
<td width="40%" align="right">密碼強(qiáng)度:</td>
<td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td>
<td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td>
<td width="20%" id="strength_H" bgcolor="#f5f5f5">強(qiáng)</td>
</tr>
</table>
</form>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
微信自定義分享鏈接信息（標(biāo)題，圖片和內(nèi)容）實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了微信自定義分享鏈接信息（標(biāo)題，圖片和內(nèi)容）實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Echarts實(shí)現(xiàn)單條折線可拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript中獲取當(dāng)前時(shí)間yyyymmddhhmmss的六種實(shí)現(xiàn)方式
js中提供了一個(gè)Date對(duì)象供我們獲取當(dāng)前時(shí)間,下面這篇文章主要給大家介紹了關(guān)于JavaScript中獲取當(dāng)前時(shí)間yyyymmddhhmmss的六種實(shí)現(xiàn)方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了小程序表單認(rèn)證布局及驗(yàn)證的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類(lèi)，知識(shí)點(diǎn)很全面，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下2016-03-03
深入探究JavaScript中for循環(huán)的效率問(wèn)題及相關(guān)優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問(wèn)題及相關(guān)優(yōu)化,文中談到了Underscore.js庫(kù)及循環(huán)在各個(gè)瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下2016-03-03
vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由權(quán)限校驗(yàn)功能的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
淺談javascript對(duì)象模型和function對(duì)象
這篇文章主要簡(jiǎn)單介紹了javascript對(duì)象模型和function對(duì)象，以及相關(guān)的示例代碼，非常實(shí)用，需要的小伙伴參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了第一篇Javascript動(dòng)畫(huà)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
詳解JavaScript中精度失準(zhǔn)問(wèn)題及解決方法
這篇文章主要介紹了JavaScript中精度失準(zhǔn)問(wèn)題及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02