jQuery密碼強度偵測外掛程式passwordStrength用法實例分析

首頁

web前端

js教程

jQuery密碼強度偵測外掛程式passwordStrength用法實例分析_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

jquery 密碼強度外掛偵測

本文實例講述了jQuery密碼強度檢測插件passwordStrength用法。分享給大家參考，具體如下：

這裡賦予密碼強度為10個等級（實例中的progressImg1.png是一張包含十個狀態的圖片），然後透過設定每個狀態的CSS樣式來直觀地顯示目前密碼的強度。其中，實現此功能的重點和困難就是透過正規進行判斷等級，有興趣的朋友可以慢慢探究。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/jquery-passwordStrength-plugs-codes/

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery密码强度插件passwordStrength实例演示</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script src="jquery.passwordStrength.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var $pwd = $('input[name="password"]');
  $pwd.passwordStrength();
  $(".Generate_password").click(function(){
  //产生随机八位密码
  var pwd = $.passwordStrength.getRandomPassword(8);
  //将随机密码写入密码框，并触发验证
  $pwd.val(pwd).trigger("keyup");
  return false;
  })
});
</script>
<style type="text/css">
body{font-size:12px;}
.clearfix:after{
content:"."; display:block; height:0; clear:both;
visibility:hidden;
}
*html .clearfix{
 height:1%;
}
*+html .clearfix{
 height:1%;
}
.l{float:left;}
.form_item{margin-bottom:6px;}
.form_item label{width:100px;text-align:right;margin-right:4px;display:block;float:left;padding-top:2px;}
.form_item .text{height:14px;padding:2px;width:132px;border:1px solid #999;}
.form_item div a{margin-left:6px;}
#passwordStrengthDiv{margin-top:6px;}
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
</style>
</head>
<body>
<script type="text/javascript"> 
if(document.getElementById('GoogleAD')!=null){
document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
}
</script>
<div class="form_item clearfix">
<label>密  码：</label>
<div class="l">
  <div><input name="password" type="text" class="text" maxlength="16"/><a href="" class="Generate_password">产生随机密码</a></div>
  <div id="passwordStrengthDiv" class="is0"></div> 
 </div>
</div>
</body>
</html>

登入後複製

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7711

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

Related knowledge

分享Edge瀏覽器不支援此外掛程式的三種解決方法 Mar 13, 2024 pm 04:34 PM

　　用戶使用Edge瀏覽器的過程中可能會添加一些插件來滿足自己更多的使用需求。但是在添加插件時顯示不支援此插件，這該如何解決？今日小編就來給大家分享三種解決方法，快來試試看。　　方法一：嘗試用其他的瀏覽器。　　方法二：瀏覽器上的FlashPlayer可能過時或遺失，導致此外掛程式不受支援狀態，可在官網下載最新版本。　　方法三：同時按下「Ctrl+Shift+Delete」鍵。　　點選“清除資料”，重新開啟瀏覽器即可。

Chrome的插件擴充功能安裝目錄是什麼 Mar 08, 2024 am 08:55 AM

Chrome的插件擴充功能安裝目錄是什麼？正常情況下，Chrome外掛程式擴充功能的預設安裝目錄如下：1、windowsxp中chrome外掛程式預設安裝目錄位置:C:\DocumentsandSettings\使用者名稱\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件預設安裝目錄位置:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User

MIT最新力作：以GPT-3.5解決時間序列異常檢測問題 Jun 08, 2024 pm 06:09 PM

今天要為大家介紹一篇MIT上週發表的文章，使用GPT-3.5-turbo解決時間序列異常檢測問題，初步驗證了LLM在時間序列異常檢測的有效性。整個過程沒有進行finetune，直接使用GPT-3.5-turbo進行異常檢測，文中的核心是如何將時間序列轉換成GPT-3.5-turbo可辨識的輸入，以及如何設計prompt或pipeline讓LLM解決異常檢測任務。下面跟大家詳細介紹一下這篇工作。圖片論文標題：Largelanguagemodelscanbezero-shotanomalydete

改進的檢測演算法：用於高解析度光學遙感影像目標檢測 Jun 06, 2024 pm 12:33 PM

01前景概要目前，難以在檢測效率和檢測結果之間取得適當的平衡。我們研究了一種用於高解析度光學遙感影像中目標偵測的增強YOLOv5演算法，利用多層特徵金字塔、多重偵測頭策略和混合注意力模組來提高光學遙感影像的目標偵測網路的效果。根據SIMD資料集，新演算法的mAP比YOLOv5好2.2%，比YOLOX好8.48%，在偵測結果和速度之間達到了更好的平衡。 02背景&動機隨著遠感技術的快速發展，高解析度光學遠感影像已被用於描述地球表面的許多物體，包括飛機、汽車、建築物等。目標檢測在遠感影像的解釋中

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

即時加SOTA一飛沖天！ FastOcc：推理更快、部署友善Occ演算法來啦！ Mar 14, 2024 pm 11:50 PM

寫在前面&筆者的個人理解在自動駕駛系統當中，感知任務是整個自駕系統中至關重要的組成部分。感知任務的主要目標是使自動駕駛車輛能夠理解和感知周圍的環境元素，如行駛在路上的車輛、路旁的行人、行駛過程中遇到的障礙物、路上的交通標誌等，從而幫助下游模組做出正確合理的決策和行為。在一輛具備自動駕駛功能的車輛中，通常會配備不同類型的信息採集感測器，如環視相機感測器、雷射雷達感測器以及毫米波雷達感測器等等，從而確保自動駕駛車輛能夠準確感知和理解周圍環境要素，使自動駕駛車輛在自主行駛的過程中能夠做出正確的決斷。目

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

See all articles

jQuery密碼強度偵測外掛程式passwordStrength用法實例分析_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題