jQuery判斷密碼強度實現思路及代碼
更新時間：2013年04月24日 15:58:39 作者：
實現思路為：密碼小于六位的時候，密碼強度圖片都為灰色;密碼為七位及以上并且字母、數字、特殊字符三項中有兩項，強度等等，感興趣的朋友可以參考下哈
復制代碼 代碼如下:
<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('小于六位的時候'); //密碼小于六位的時候，密碼強度圖片都為灰色
}
else if (strongRegex.test($(this).val())) {
$('#div2').removeClass('zhong');
$('#div2').addClass('qiang');
//$('#passstrength').html('強!'); //密碼為八位及以上并且字母數字特殊字符三項都包括
}
else if (mediumRegex.test($(this).val())) {
$('#div2').removeClass('ruo');
$('#div2').addClass('zhong');
//$('#passstrength').html('中!'); //密碼為七位及以上并且字母、數字、特殊字符三項中有兩項，強度是中等
}
else {
$('#div2').removeClass('ruox');
$('#div2').addClass('ruo');
//$('#passstrength').html('弱!'); //如果密碼為6為及以下，就算字母、數字、特殊字符三項都包括，強度也是弱的
}
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>
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
吃豆游戲可以說是我們80，90后共同的回憶錄，小時候常常在學習機上玩，所以也就有了強烈的欲望去寫。所以本文將利用JS+HTML實現這一經典游戲，需要的可以參考一下2022-04-04
這篇文章主要介紹Javascript正則如何控制文本框只能輸入整數或浮點數,需要的朋友可以參考下2014-09-09
'webpack-dev-server'?不是內部或外部命令也不是可運行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了webpack-dev-server的介紹與用法，需要的朋友可以參考下2023-02-02
在UniApp中事件處理非常重要,通過事件處理可以實現用戶與應用程序之間的交互,這篇文章主要給大家介紹了關于uniapp中常用的事件處理方法的相關資料,需要的朋友可以參考下2023-12-12
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...2006-10-10
js中addEventListener()與removeEventListener()用法案例分析
這篇文章主要介紹了js中addEventListener()與removeEventListener()用法,結合實例形式分析了js中addEventListener()與removeEventListener()基本功能、用法與操作注意事項,需要的朋友可以參考下2020-03-03
有時候我們需要對文件名進行控制，包括一些特殊命名的文件與特殊符號的文件名進程替換，那么就可以使用下面的函數2017-07-07
這篇文章主要介紹了javasctipt如何顯示幾分鐘前、幾天前等,需要的朋友可以參考下2014-04-04
本文章來給大家介紹一個javascript中向左滾動文字效果。有需要使用的朋友可參考，這里面我們需要注意下面的css必須強制white-space:nowrap;overflow:hidden;不換行才行哦2013-08-08