js 密碼強度檢測

来源:http://www.cnblogs.com/manongjc/archive/2016/02/24/5211868.html
-Advertisement-
Play Games

這篇文章主要介紹了js實現密碼強度檢測的相關實例，第一個例子給出了全部代碼，可以直接運行，第二個例子只給出了js代碼，感興趣的碼農可以自己完成第二個實例。 第一個實例 這段JavaScript代碼比較實用，它完成用戶註冊時判斷用戶輸入密碼的強度，分強、弱、中三等級，它可以根據用戶輸入的密碼顯示對應的


這篇文章主要介紹了js實現密碼強度檢測的相關實例，第一個例子給出了全部代碼，可以直接運行，第二個例子只給出了js代碼，感興趣的碼農可以自己完成第二個實例。

 

第一個實例

這段JavaScript代碼比較實用，它完成用戶註冊時判斷用戶輸入密碼的強度，分強、弱、中三等級，它可以根據用戶輸入的密碼顯示對應的密碼強弱等級，方便用戶改進輸入。

實現代碼：

<html>
<head>
<title>JS判斷密碼強度</title>
<script language=javascript> 
//判斷輸入密碼的類型 
function CharMode(iN){ 
if (iN>=48 && iN <=57) //數字 
return 1; 
if (iN>=65 && iN <=90) //大寫 
return 2; 
if (iN>=97 && iN <=122) //小寫 
return 4; 
else 
return 8;  
} 
//bitTotal函數 
//計算密碼模式 
function bitTotal(num){ 
modes=0; 
for (i=0;i<4;i++){ 
if (num & 1) modes++; 
num>>>=1; 
} 
return modes; 
} 
//返回強度級別 
function checkStrong(sPW){ 
if (sPW.length<=4) 
return 0; //密碼太短 
Modes=0; 
for (i=0;i<sPW.length;i++){ 
//密碼模式 
Modes|=CharMode(sPW.charCodeAt(i)); 
} 
return bitTotal(Modes); 
} 
  
//顯示顏色 
function pwStrength(pwd){ 
O_color="#eeeeee"; 
L_color="#FF0000"; 
M_color="#FF9900"; 
H_color="#33CC00"; 
if (pwd==null||pwd==''){ 
Lcolor=Mcolor=Hcolor=O_color; 
} 
else{ 
S_level=checkStrong(pwd); 
switch(S_level) { 
case 0: 
Lcolor=Mcolor=Hcolor=O_color; 
case 1: 
Lcolor=L_color; 
Mcolor=Hcolor=O_color; 
break; 
case 2: 
Lcolor=Mcolor=M_color; 
Hcolor=O_color; 
break; 
default: 
Lcolor=Mcolor=Hcolor=H_color; 
} 
} 
document.getElementById("strength_L").style.background=Lcolor; 
document.getElementById("strength_M").style.background=Mcolor; 
document.getElementById("strength_H").style.background=Hcolor; 
return; 
} 
</script>
</head>
<body> 
<form name=form1 action="" > 
密碼:<input type=password size=8 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)> 
<br>密碼強度: 
<table width="210" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22" style='display:inline'> 
<tr align="center" bgcolor="#f5f5f5"> 
<td width="33%" id="strength_L">弱</td> 
<td width="33%" id="strength_M">中</td> 
<td width="33%" id="strength_H">強</td> 
</tr> 
</table> 
</form>
</body>
</html>

 

線上運行

 

第二個實例：

<script>
function AuthPasswd(string) {
    if (string.length >= 6) {
        if (/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
            noticeAssign(1);
        } else if (/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
            if (/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
                noticeAssign( - 1);
            } else if (/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
                noticeAssign( - 1);
            } else if (/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
                noticeAssign( - 1);
            } else {
                noticeAssign(0);
            }
        }
    } else {
        noticeAssign(null);
    }
}

function noticeAssign(num) {
    if (num == 1) {
        $('#weak').css({
            backgroundColor: '#009900'
        });
        $('#middle').css({
            backgroundColor: '#009900'
        });
        $('#strength').css({
            backgroundColor: '#009900'
        });
        $('#strength').html('很強');
        $('#middle').html('');
        $('#weak').html('');
    } else if (num == -1) {
        $('#weak').css({
            backgroundColor: '#ffcc33'
        });
        $('#middle').css({
            backgroundColor: '#ffcc33'
        });
        $('#strength').css({
            backgroundColor: ''
        });
        $('#weak').html('');
        $('#middle').html('中');
        $('#strength').html('');
    } else if (num == 0) {
        $('#weak').css({
            backgroundColor: '#dd0000'
        });
        $('#middle').css({
            backgroundColor: ''
        });
        $('#strength').css({
            backgroundColor: ''
        });
        $('#weak').html('弱');
        $('#middle').html('');
        $('#strength').html('');
    } else {
        $('#weak').html(' ');
        $('#middle').html(' ');
        $('#strength').html(' ');
        $('#weak').css({
            backgroundColor: ''
        });
        $('#middle').css({
            backgroundColor: ''
        });
        $('#strength').css({
            backgroundColor: ''
        });
    }
} < /script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 瞭解JavaScript 面向對象基礎 & 原型與對象
    面向對象語言中的對象 老是能聽到什麼基於對象, 面向對象. 什麼是對象, 如果有面向對象基礎的人可以無視了, 下麵舉個簡單的例子給大家講講面向對象中, 對象的定義, 這個是比較通用的, 不過對於JS來說不太一樣, 但是理解總是好的. 首先, 先有類型(Class), 這個類是指具有本質相同的一類事物
  • 關於H5 storage 的一些註意事項以及用法
    在我們使用H5 storage之前，先瞭解一下storage的介紹吧： Storage模塊管理應用本地數據存儲，用於應用數據的保存和讀取，應用本地數據localStorage,sessionStorage的區別在於數據的有效域不同，前者可在應用內跨域操作，數據存儲期是持久化的，並且沒有容量的限制，通
  • 聊聊Iconfont
    一、前言 說起Iconfont，對大多數人來說可能不是什麼新的技術了，現在好多大網站已經開始使用Iconfont。博主今天主要是簡單說一下它的使用方法，聊聊使用它時可能遇到哪些坑，不熟悉的同學可以簡要看一下，資深瞭解的同學，如果發現問題，還請指正。 二、什麼是Iconfont 有的同學可能會問什麼是
  • css3常用動畫+動畫庫
    一、animates.css animate.css是來自dropbox的工程師Daniel Eden開發的一款CSS3的動畫效果小類庫。包含了60多款不同類型的CSS3動畫，包括：晃動，閃動，各種淡出淡出效果，如果你想快速的整合各種CSS3動畫特效的話，使用它即可方便的實現。 查看演示： http
  • Http協議中關於Content-Length的解讀
    在HTTP協議中，有Content-Length的詳細解讀。Content-Length用於描述HTTP消息實體的傳輸長度the transfer-length of the message-body。在HTTP協議中，消息實體長度和消息實體的傳輸長度是有區別，比如說gzip壓縮下，消息實體長度是壓
  • nodejs學習筆記四——express-session
    博友沉沉-_-的這篇express 框架之session分析的已經非常詳細了，本人這裡就不描述了。 總結其中的幾個關鍵點。 1.http協議規定http鏈接是無狀態的鏈接，cookie和session的出現就是為了讓伺服器能識別客戶端請求的連接狀態（通過讀取他們的值來識別）。 2.session的實
  • css實現table中td單元格滑鼠懸浮時顯示更多內容
    table中，td單元格無法顯示下全部內容，需要在滑鼠hover時顯示全部內容。 正常顯示樣式： 滑鼠hover時： html： <td>displayAddress<span class="tdtip">popAddress</span></td> css： td{ position:relati
  • css 給table設置樣式
    原文地址：http://www.manongjc.com/article/291.html 在一個網頁中多處使用了表格table標簽，這個時候給指定的表格對象設置樣式依然可以通過CSS進行控制設置。其實有時我們這樣思考將table標簽當作DIV標簽來佈局設置CSS，就變得簡單多了。 對table設置
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類