在線演示1 本地下載?
在今天的jQuery教程中，我們將介紹如何使用jQuery和其它相關(guān)的插件來生成一個(gè)漂亮的帶有密碼強(qiáng)度檢驗(yàn)的注冊(cè)頁面草戈，希望大家喜歡塌鸯！相關(guān)的插件和類庫 complexify - 一個(gè)密碼強(qiáng)度檢驗(yàn)jQuery插件 justgage - 一個(gè)兼容性良好的儀表盤類庫主要功能注冊(cè)中包含一個(gè)密碼強(qiáng)度檢驗(yàn)組件，用戶需要設(shè)置一定強(qiáng)度的密碼才可以注冊(cè)密碼強(qiáng)度使用儀表盤類庫justgage來顯示唐片，不同的強(qiáng)度的密碼將顯示不同的顏色密碼強(qiáng)度符合要求后丙猬，顯示注冊(cè)按鈕代碼說明HTML：
注冊(cè)新賬號(hào) - gbtags.com
添加電子郵件和密碼輸入框涨颜，及其密碼強(qiáng)度組件。Javascript：導(dǎo)入所需的類庫茧球，包括：以下為生成儀表盤及其密碼強(qiáng)度代碼：
$(function(){$('#submit').attr('disabled', true);var g1 = new JustGage({? id: "complexity",? value: 0,? min: 0,? max: 100,? title: "密碼強(qiáng)度提示",? 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生成需要的儀表盤。相關(guān)選項(xiàng)請(qǐng)參考代碼抢埋。以下代碼中见擦，我們使用complexify的回調(diào)方法來判斷用戶輸入的密碼強(qiáng)度是否符合要求：
$("#password").complexify({}, function(valid, complexity){if(valid){$('#submit').fadeIn();}else{$('#submit').fadeOut();}g1.refresh(Math.round(complexity));});?
如果符合則顯示注冊(cè)按鈕，否則隱藏羹令。同時(shí)刷新儀表盤的數(shù)值和顏色鲤屡。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;}?
代碼書寫完畢，如果需要查看完整代碼福侈，請(qǐng)下載演示酒来。希望大家喜歡這個(gè)實(shí)現(xiàn)！如果你有任何意見和建議請(qǐng)給我們留言肪凛，謝謝堰汉！
