js判斷密碼強度的方法
更新時間：2020年03月18日 15:41:14 作者：cometwo
這篇文章主要為大家詳細介紹了js判斷密碼強度的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js判斷密碼強度的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密碼強度檢測</title>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<style type="text/css">
body {
font: 12px/1.5 Arial;
}
input {
float: left;
font-size: 12px;
width: 150px;
font-family: arial;
padding: 3px;
border: 1px solid black;
}
input.error {
border: 1px solid red;
}
#tips {
float: left;
margin: 2px 0 0 20px;
}
#tips span {
float: left;
width: 50px;
height: 20px;
color: white;
background: green;
margin-right: 2px;
line-height: 20px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
var aStr = ["弱", "中", "強", "牛逼"];
function checkStrong(val) {
var modes = 0;
if (val.length < 6) return 0;
if (/\d/.test(val)) modes++; //數(shù)字
if (/[a-z]/.test(val)) modes++; //小寫
if (/[A-Z]/.test(val)) modes++; //大寫
if (/\W/.test(val)) modes++; //特殊字符
if (val.length > 12) return 4;
return modes;
};
$(":text").keyup(function() {
var val = $(this).val();
$("p").text(val.length);
var num = checkStrong(val);
switch (num) {
case 0:
break;
case 1:
$("#tips span").css('background', 'yellow').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
break;
case 2:
$("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
break;
case 3:
$("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
break;
case 4:
$("#tips span").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
break;
default:
break;
}
})
})
</script>
</head>
<body>
<input type="text" value="" maxlength="16" />
<div id="tips"><span></span><span></span><span></span><span></span></div>
<p></p>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了微信小程序通過uni-app進行全局分享，小編覺得挺不錯的，現(xiàn)在分享給大家，需要的朋友可以收藏下2021-11-11
手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)
這篇文章主要介紹了手機端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實現(xiàn)，感興趣的小伙伴們可以參考一下2016-08-08
javaScript強制保留兩位小數(shù)的輸入數(shù)校驗和小數(shù)保留問題
這篇文章主要介紹了javaScript強制保留兩位小數(shù)的輸入數(shù)校驗和小數(shù)保留問題，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb（2）
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個強大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下2015-12-12
JavaScript設(shè)計模式經(jīng)典之命令模式
命令模式（Command）的定義是：用來對方法調(diào)用進行參數(shù)化處理和傳送，經(jīng)過這樣處理過的方法調(diào)用可以在任何需要的時候執(zhí)行。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之命令模式，需要的朋友參考下2016-02-02
javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-12-12
這篇文章主要介紹了js實現(xiàn)全選反選不選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-04-04
JavaScript中時間日期函數(shù)new?Date()詳解(5種獲取時間戳的函數(shù))
這篇文章主要給大家介紹了關(guān)于JavaScript中時間日期函數(shù)new?Date()的相關(guān)資料,主要講的是JS中5種獲取時間戳的函數(shù),new Date()是JavaScript中用于獲取當前日期和時間的內(nèi)置函數(shù),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了JS邏輯運算符短路操作,結(jié)合實例形式分析了javascript三個邏輯運算符短路操作的原理與使用技巧,需要的朋友可以參考下2018-07-07