JQ技術實現注冊頁面帶有校驗密碼強度

2024-05-06 16:23:50

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JQ技術實現注冊頁面帶有校驗密碼強度,需要的朋友可以參考下

主要介紹使用jQuery實現帶有校驗密碼強度的注冊頁面，當然要想生成一個漂亮的帶有密碼強度檢驗的注冊頁面要有相關插件和類庫配合，具體內容如下：

相關的插件和類庫

complexify - 一個密碼強度檢驗jQuery插件
justgage - 一個兼容性良好的儀表盤類庫
主要功能

注冊中包含一個密碼強度檢驗組件，用戶需要設置一定強度的密碼才可以注冊
密碼強度使用儀表盤類庫justgage來顯示，不同的強度的密碼將顯示不同的顏色
密碼強度符合要求后，顯示注冊按鈕
代碼說明

<div id="page-wrap">

<div id="title">注冊新賬號 - gbtags.com</div>

<p>

<input type="text" name="email" id="email" placeholder="電子郵件"/>

</p>

<p>

<input type="password" name="password" id="password" placeholder="輸入密碼"/>

</p>

<div id="complexity"></div>

<p>

<input type="button" name="submit" id="submit" value="注冊" />

</p>

<p id="msgbox"></p>

</div>

添加電子郵件和密碼輸入框，及其密碼強度組件。

Javascript：

導入所需的類庫，包括：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.complexify.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>

以下為生成儀表盤及其密碼強度代碼：

上一篇：在for循環中length值是否需要緩存

下一篇：jquery實現TAB選項卡鼠標經過帶延遲效果的方法