使用jQuery開發(fā)一個(gè)帶有密碼強(qiáng)度檢驗(yàn)的超酷注冊(cè)頁面

在線演示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)給我們留言肪凛,謝謝堰汉!

原文鏈接:http://www.gbtags.com/gb/share/5889.htm

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市伟墙,隨后出現(xiàn)的幾起案子翘鸭,更是在濱河造成了極大的恐慌,老刑警劉巖戳葵,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件就乓,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡拱烁,警方通過查閱死者的電腦和手機(jī)生蚁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戏自,“玉大人邦投,你說我怎么就攤上這事∩帽剩” “怎么了志衣?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長猛们。 經(jīng)常有香客問我念脯,道長,這世上最難降的妖魔是什么阅懦? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任和二,我火速辦了婚禮,結(jié)果婚禮上耳胎,老公的妹妹穿的比我還像新娘惯吕。我一直安慰自己惕它,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布废登。 她就那樣靜靜地躺著淹魄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪堡距。 梳的紋絲不亂的頭發(fā)上甲锡,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音羽戒,去河邊找鬼缤沦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛易稠,可吹牛的內(nèi)容都是我干的缸废。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼驶社,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼企量!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起亡电,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤届巩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后份乒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恕汇,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年冒嫡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拇勃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡孝凌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出月腋,到底是詐尸還是另有隱情蟀架,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布榆骚,位于F島的核電站片拍,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏妓肢。R本人自食惡果不足惜捌省,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碉钠。 院中可真熱鬧纲缓,春花似錦卷拘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至工闺,卻和暖如春乍赫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背陆蟆。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國打工雷厂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人叠殷。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓罗侯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親溪猿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子钩杰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 1、垂直對(duì)齊 如果你用CSS诊县,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素讲弄?現(xiàn)在,利用CSS3的Transform依痊,...
    kiddings閱讀 3,153評(píng)論 0 11
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,843評(píng)論 0 1
  • 不會(huì)用代碼框避除,所以看著有些亂套,胸嘁,瓶摆,,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個(gè)帥氣的名字閱讀 1,527評(píng)論 0 0
  • 城市快速發(fā)展的今天性宏,每個(gè)地方都有著幾條斷頭路群井。 斷頭路的出現(xiàn),和促使城市建設(shè)的“BT”模式有關(guān)毫胜。作為模式一方的公司...
    老丁子閱讀 277評(píng)論 0 2
  • 寶貝別哭 吃顆甜甜的糖 你看誰在遠(yuǎn)方 背著行囊揮手告別 寶貝別哭 喝碗暖暖的粥 你聽誰在唱歌 夜晚的回音模糊不清 ...
    倒敘閱讀 242評(píng)論 1 1