js正則表達(dá)式驗(yàn)證密碼強(qiáng)度【推薦】
更新時(shí)間：2017年03月03日 11:52:46 作者：chang紅達(dá)
本文主要介紹了js利用正則表達(dá)式驗(yàn)證密碼強(qiáng)度的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>驗(yàn)證密碼強(qiáng)度</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background:#ccc;}
#demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;}
#strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;}
.lv1{background:red;}
.lv2{background:blue;width:200px;}
.lv3{background:green;width:300px;}
</style>
</head>
<body>
<div id="demo">
<label for="ipt">密碼：</label>
<input type="text" id="ipt"><br/>
<em>密碼強(qiáng)度：</em><em id="strength"></em>
<div id="strength_length"></div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
var arr = ["","低","中","高"];
// 獲取對(duì)象
var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length");
// 密碼輸入事件
ipt.onkeyup = function(){
var s = 0;
var txt = this.value;
if( /[a-zA-Z]/.test(txt) ){
s++;
};
if( /[0-9]/.test(txt) ){
s++;
};
if( /[^0-9a-zA-Z]/.test(txt) ){
s++;
};
if( txt.length <6 ){
s = 0;
};
strength.innerHTML = arr[s];
strLength.className = "lv" + s;
}
})(window)
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript+html5 canvas制作的百花齊放效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas制作的百花齊放效果,結(jié)合完整實(shí)例形式分析了使用html5的canvas技術(shù)動(dòng)態(tài)繪制圖形的技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了javascript 應(yīng)用小技巧方法匯總的相關(guān)資料,需要的朋友可以參考下2015-07-07
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)，我們常常通過(guò)將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法。本文為大家總結(jié)了6個(gè)JS字符串轉(zhuǎn)數(shù)組的方法，希望對(duì)你有所幫助2022-09-09
本篇文章主要介紹了淺談mint-ui 填坑之路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能,結(jié)合實(shí)例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
Javascript構(gòu)造函數(shù)是非常強(qiáng)大的,它可能也是Javascript能被充分利用的特點(diǎn)之一,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),這篇文章主要給大家介紹了關(guān)于JavaScript構(gòu)造函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-04-04
下面小編就為大家?guī)?lái)一篇js的OOP繼承實(shí)現(xiàn)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
大家討論下constructor的作用哈,需要的朋友可以參考下。從51js摘編而來(lái)。2011-11-11
鏈表是一種數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)和組織一系列元素,這些元素以節(jié)點(diǎn)的形式連接在一起,每個(gè)節(jié)點(diǎn)包含數(shù)據(jù)和一個(gè)指向下一個(gè)節(jié)點(diǎn)的引用,鏈表可以分為單鏈表、雙鏈表和循環(huán)鏈表等不同類型,但在本文中,我們將重點(diǎn)關(guān)注單鏈表,需要的朋友可以參考下2023-09-09
javascript數(shù)組中的map方法和filter方法
這篇文章主要介紹了javascript數(shù)組中的map方法和filter方法,文章內(nèi)容介紹詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03