bootstrap建立登入註冊頁面

2021-07-08 22:40:14 字數 1868 閱讀 2550

用bootstrap做登入註冊頁面,使用validate做表單驗證

技術:bootstrap,font-awesome,jquery-validate;

宗旨:從實戰中學知識。

驗證碼實現功能 itdragon部落格

效果圖:

},messages: 個字 符")

},} });

$("#register_form").validate(,

rpassword: ,

email:

},messages: 個字 符")

},rpassword: ,

email:

} });

});$(function() );

$("#back_btn").click(function() );

});現在我們開始談談所用到的知識點:

①bootstrap的布局:

bootstrap用的是網格布局,使用col-*-*

使用條件:要在.container和.row下才能使用,結構如下:

...

col-sm-*:大於768px,平板

col-md-*:大於998px,普通電腦,筆記本之類

col-lg-*:大於1200px,一般為大型台式電腦

可以同時使用,達到跨多個裝置效果

偏移:col-*-offset-*

②表單:

這裡的表單和普通表單沒什麼太多區別,我就不多說了。

③font-awesome的使用:

使用的是4.3.0版本,使用方法

fa-lg表示大圖

④jquery-validate表單驗證:

這是我要講的重點,

第一步:首先到匯入jquery-validate第三方資源,

第二步:建立好form表單,初始化validate

$("#login_form").validate(,

},messages: 個字 符")

},} });

注意這裡的login_form必須是form表單上的選擇器,筆者因為將其設定在div上,控制台顯示settings沒有被定義的錯誤。這裡的username和password都是form表單中的name值;rules是規則,message是提示的資訊

required:true表示該字段為必填,

minlength表示長度至少為5,maxlength是html5支援的,所以不用在這裡面設定

equalto表示與某某相同,後面接的是第乙個值,"#id"或者是".class"

message中對應的內容後面就是提示的文字資訊。可以直接copy我的**,然後根據自己的需要修改。

⑤背景自適應螢幕大小:

不知道前到處找文件,知道後才發現好簡單,那就是background-size:cover;這樣可以做到背景和瀏覽器大小一樣了。很簡單吧。

我覺得在實戰中學習比盲目學習效果好很多,知道這些知識可以做什麼,解決了為什麼學這些知識的問題。

登入註冊資料庫建立

學習前端的時候ajax學習的時候主要練習講解的就是登入註冊問題,從最開始的源生 到後來的jquery再到後面的angularjs。講了這三種登入註冊問題。我先講一下後台資料庫的建立,因為不管是哪一種後台都是一樣的,只有前台js的時候才有差別。要登入和註冊,首先就要先建立資料庫,我們設計資料庫表的時候...

登入註冊 註冊輸入驗證

上次講了登入註冊問題的資料庫表怎麼建,以及具體有哪些內容。今天主要講一下註冊的表單驗證。我們經常上網各種登入註冊的時候應該已經注意過就是有時候密碼有要求,比如輸入6 20位密碼。還有確認密碼,必須和密碼輸入一致的時候才行。郵箱也是,郵箱的格式不能出錯。當以上格式有誤的時候就不能提交表單,還有如果還有...

登入與註冊

2.企業角度,收集使用者資訊,建立企業使用者體系,來進行使用者分析和使用者運營等等,目的是為企業帶來更多的價值。3.響應國家網路實名制的要求。一般會驗證手機號或身份證號 手機號註冊 手機號註冊必不可少的三要素,手機號,驗證碼,密碼。完成這三個要素,可以在乙個頁面完成,也可以在多個頁面完成,當註冊流程...