快捷導(dǎo)航

jQuery判斷密碼強(qiáng)度實(shí)現(xiàn)思路及代碼

更新時(shí)間：2013年04月24日 15:58:39 作者：

實(shí)現(xiàn)思路為：密碼小于六位的時(shí)候，密碼強(qiáng)度圖片都為灰色;密碼為七位及以上并且字母、數(shù)字、特殊字符三項(xiàng)中有兩項(xiàng)，強(qiáng)度等等，感興趣的朋友可以參考下哈

復(fù)制代碼代碼如下:

 
<head> 
<title></title> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
.qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height:40px;float:left;} 
.zhong{background:url(/images/pas3.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruo{background:url(/images/pas2.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruox{background:url(/images/pas1.JPG) no-repeat;width:150px;height:40px;float:left;} 
.div1css{float:left;width:200px;} 
</style> 
<script type="text/javascript"> 
$(function () { 
$('#pass').keyup(function () { 
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 

if (false == enoughRegex.test($(this).val())) { 
$('#div2').addClass('ruox'); 
//$('#passstrength').html('小于六位的時(shí)候'); //密碼小于六位的時(shí)候，密碼強(qiáng)度圖片都為灰色 
} 
else if (strongRegex.test($(this).val())) { 
$('#div2').removeClass('zhong'); 
$('#div2').addClass('qiang'); 
//$('#passstrength').html('強(qiáng)!'); //密碼為八位及以上并且字母數(shù)字特殊字符三項(xiàng)都包括 
} 
else if (mediumRegex.test($(this).val())) { 
$('#div2').removeClass('ruo'); 
$('#div2').addClass('zhong'); 
//$('#passstrength').html('中!'); //密碼為七位及以上并且字母、數(shù)字、特殊字符三項(xiàng)中有兩項(xiàng)，強(qiáng)度是中等 
} 
else { 
$('#div2').removeClass('ruox'); 
$('#div2').addClass('ruo'); 
//$('#passstrength').html('弱!'); //如果密碼為6為及以下，就算字母、數(shù)字、特殊字符三項(xiàng)都包括，強(qiáng)度也是弱的 
} 
return true; 
}); 
}) 
</script> 
</head> 
<body> 
<div id="div1" class="div1css"> 
<input type="password" name="pass" id="pass" /></div> 
<div id="div2"><span id="passstrength"></span></div> 
</body> 

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
JS+HTML實(shí)現(xiàn)經(jīng)典游戲吃豆人
吃豆游戲可以說是我們80，90后共同的回憶錄，小時(shí)候常常在學(xué)習(xí)機(jī)上玩，所以也就有了強(qiáng)烈的欲望去寫。所以本文將利用JS+HTML實(shí)現(xiàn)這一經(jīng)典游戲，需要的可以參考一下
2022-04-04
Javascript正則控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù)
這篇文章主要介紹Javascript正則如何控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù),需要的朋友可以參考下
2014-09-09
'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運(yùn)行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運(yùn)行的程序?或批處理文件的最新解決方法,文中給大家補(bǔ)充介紹了webpack-dev-server的介紹與用法，需要的朋友可以參考下
2023-02-02
uniapp中常用的事件處理方法詳解
在UniApp中事件處理非常重要,通過事件處理可以實(shí)現(xiàn)用戶與應(yīng)用程序之間的交互,這篇文章主要給大家介紹了關(guān)于uniapp中常用的事件處理方法的相關(guān)資料,需要的朋友可以參考下
2023-12-12
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...
2006-10-10
js中addEventListener()與removeEventListener()用法案例分析
這篇文章主要介紹了js中addEventListener()與removeEventListener()用法,結(jié)合實(shí)例形式分析了js中addEventListener()與removeEventListener()基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
js is_valid_filename驗(yàn)證文件名的函數(shù)
有時(shí)候我們需要對(duì)文件名進(jìn)行控制，包括一些特殊命名的文件與特殊符號(hào)的文件名進(jìn)程替換，那么就可以使用下面的函數(shù)
2017-07-07
javasctipt如何顯示幾分鐘前、幾天前等
這篇文章主要介紹了javasctipt如何顯示幾分鐘前、幾天前等,需要的朋友可以參考下
2014-04-04
向左滾動(dòng)文字 js代碼效果
本文章來給大家介紹一個(gè)javascript中向左滾動(dòng)文字效果。有需要使用的朋友可參考，這里面我們需要注意下面的css必須強(qiáng)制white-space:nowrap;overflow:hidden;不換行才行哦
2013-08-08