js檢驗密碼強度(低中高)附圖
更新時間：2014年06月05日 17:23:43 作者：
注冊模塊中輸入密碼需要顯示密碼強度（低中高）本例將做的效果給大家分享下
最近一直在做通行證項目，里面的注冊模塊中輸入密碼需要顯示密碼強度（低中高）。今天就把做的效果給大家分享下，代碼沒有網(wǎng)上搜索的那么復(fù)雜，能夠滿足一般的需求。
html 代碼如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>密碼強度</title>
<style type="text/css">
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
.strengthLv1{background:red;height:6px;width:40px;}
.strengthLv2{background:orange;height:6px;width:80px;}
.strengthLv3{background:green;height:6px;width:120px;}
</style>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div class="pass-wrap">
<em>密碼強度：</em>
<div id="passStrength"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>
js 代碼如下：
function PasswordStrength(passwordID,strengthID){
this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength(this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
var lv = 0;
if(val.match(/[a-z]/g)){lv++;}
if(val.match(/[0-9]/g)){lv++;}
if(val.match(/(.[^a-z0-9])/g)){lv++;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3;}
this.oStrength.className = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
效果圖：
使用說明：
1、對象的第一個參數(shù)是密碼輸入框的 id，第二個參數(shù)是密碼強度長條的 id。
2、checkStrength 方法中可以自定義密碼強度的規(guī)則。
3、密碼強度顯示低中高分別對應(yīng) 3 個 css 樣式（strengthLv1、strengthLv2、strengthLv3）。
html 代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>密碼強度</title>
<style type="text/css">
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
.strengthLv1{background:red;height:6px;width:40px;}
.strengthLv2{background:orange;height:6px;width:80px;}
.strengthLv3{background:green;height:6px;width:120px;}
</style>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div class="pass-wrap">
<em>密碼強度：</em>
<div id="passStrength"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>
js 代碼如下：
復(fù)制代碼 代碼如下:
function PasswordStrength(passwordID,strengthID){
this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength(this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
var lv = 0;
if(val.match(/[a-z]/g)){lv++;}
if(val.match(/[0-9]/g)){lv++;}
if(val.match(/(.[^a-z0-9])/g)){lv++;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3;}
this.oStrength.className = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
效果圖：
使用說明：
1、對象的第一個參數(shù)是密碼輸入框的 id，第二個參數(shù)是密碼強度長條的 id。
2、checkStrength 方法中可以自定義密碼強度的規(guī)則。
3、密碼強度顯示低中高分別對應(yīng) 3 個 css 樣式（strengthLv1、strengthLv2、strengthLv3）。
相關(guān)文章
一直以來，對于JavaScript 中的this的理解都是很模糊的， 特別是對函數(shù)進行apply 與 call 調(diào)用。這兩個操作如果沒有很好的理解 JavaScript中this的概念，會越搞越迷糊。2009-07-07
這篇文章主要介紹了js格式化輸入框內(nèi)金額、銀行卡號，采用“keyup”事件處理格式化，每4位數(shù)一組中間空格隔開，如何格式化輸入框內(nèi)金額、銀行卡號，需要了解的朋友可以參考一下2016-02-02
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)bootstrap選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了微信小程序自定義狀態(tài)欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
javascript設(shè)計模式 – 中介者模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 中介者模式,結(jié)合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
在現(xiàn)代網(wǎng)頁設(shè)計中,文本是網(wǎng)頁中最重要的內(nèi)容之一,然而,當(dāng)文本超出其容器的大小時,會發(fā)生文本溢出的問題,文本溢出不僅會影響網(wǎng)頁的視覺效果,還會影響網(wǎng)頁的可讀性和可用性,所以本文給大家介紹了前端實現(xiàn)文本溢出展開和收起功能的方法,需要的朋友可以參考下2025-04-04
今天小編就為大家分享一篇關(guān)于js中實例與對象的區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
今天小編就為大家分享一篇layui select獲取自定義屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了使用Vue3實現(xiàn)一個Upload組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
微信小程序調(diào)用微信支付接口的實現(xiàn)方法
這篇文章主要介紹了微信小程序調(diào)用微信支付接口，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04