主要介紹使用jQuery實現帶有校驗密碼強度的注冊頁面，當然要想生成一個漂亮的帶有密碼強度檢驗的注冊頁面要有相關插件和類庫配合，具體內容如下：
相關的插件和類庫
complexify - 一個密碼強度檢驗jQuery插件
justgage - 一個兼容性良好的儀表盤類庫
主要功能
注冊中包含一個密碼強度檢驗組件，用戶需要設置一定強度的密碼才可以注冊
密碼強度使用儀表盤類庫justgage來顯示，不同的強度的密碼將顯示不同的顏色
密碼強度符合要求后，顯示注冊按鈕
代碼說明
HTML：<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=">
<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>
以下為生成儀表盤及其密碼強度代碼：
$(function(){$('#submit').attr('disabled', true);var g1 = new JustGage({id: "complexity",value: 0,min: 0,max: 100,title: "密碼強度提示",titleFontColor: '#9d7540',valueFontColor : '#CCCCCC',label: "points",levelColors: ["#dfa65a","#926d3b","#584224"]});$('input[placeholder]').placeholder();$("#password").complexify({}, function(valid, complexity){if(valid){$('#submit').fadeIn();}else{$('#submit').fadeOut();}g1.refresh(Math.round(complexity));});$('#submit').click(function(){$('#msgbox').html('welcome to gbtags.com');});});
以上代碼中，我們使用JustGage生成需要的儀表盤。相關選項請參考代碼。
以下代碼中，我們使用complexify的回調方法來判斷用戶輸入的密碼強度是否符合要求：
$("#password").complexify({}, function(valid, complexity){if(valid){$('#submit').fadeIn();}else{$('#submit').fadeOut();}g1.refresh(Math.round(complexity));});
如果符合則顯示注冊按鈕，否則隱藏。同時刷新儀表盤的數值和顏色。
CSS代碼：body{background: url('../images/body.png');} #container{background: url('../images/bg.jpg');padding: 30px;margin-top: 150px;box-shadow: 0px 0px 30px #9d7540;border-radius: 5px 5px 0px 0px;} #page-wrap{margin: 0 auto;width: 310px;text-align: center;font-size: 14px;padding:0px;font-family: Arial;} P{margin: 20px 0;padding:0;} #title{width: 292px;margin: 20px 0;font-size: 14px;font-weight: normal;font-family: Arial;color: #a27942;text-align:left;border-left: 4px solid #6e522d;border-right: 6px solid #303030;border-radius: 5px;padding: 12px 5px;background: #303030;box-shadow: 0px 0px 10px #4f3b20;} #msgbox{color: #808080;} input{width: 300px;height: 40px;box-shadow: 0px 0px 10px #4f3b20;border-radius: 5px;font-size: 14px;font-weight: normal;margin:0;padding: 0 5px;border: 1px solid #606060;font-family: Arial;background: #303030;color: #CCC;} #complexity{width: 302px;padding: 5px 5px;font-size: 18px;font-weight: bold;margin: 0px;box-shadow: 0px 0px 10px #4f3b20;border-radius: 5px;color:#CCC;background: #303030;} #submit{display: none;width: 310px;} #gbin1{padding: 15px 0px;text-align: center;background: #101010;color: #909090;font-size:12px;font-family: Arial;border-radius: 0px 0px 5px 5px;box-shadow: 0px 0px 20px #4f3b20;} #gbin1 a{font-family: Arial;font-size:12px;color: #909090;text-shadow: 1px 1px 25px #fff;text-decoration: none;}通過相關類庫和插件生成一個漂亮的帶有密碼強度檢驗的注冊頁面，使用JQ技術實現此功能，希望大家能夠喜歡。
新聞熱點
疑難解答
