Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
最近做了一個(gè)項(xiàng)目其中有項(xiàng)目需求涉及到訪問控制,在訪問需要登錄才能使用的頁(yè)面或功能時(shí),會(huì)彈出登錄框:
效果如下:
圖 1-點(diǎn)擊用戶名時(shí),如未登錄彈出登錄框
對(duì)這個(gè)功能的詳細(xì)描述:
不涉及到登錄時(shí),登錄框隱藏
涉及到登錄時(shí),登錄框彈出到頁(yè)面左上角
登陸成功后登錄框隱藏
實(shí)現(xiàn)思路:
在body結(jié)束標(biāo)簽之前插入登錄的div,設(shè)其定位方式為absolute,位置在左上角。
登錄框默認(rèn)的display屬性為none。觸發(fā)登錄時(shí),將該屬性改為block
附上示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> h3{width:100%;padding-bottom:10px;border-bottom:2px solid #CCC;} #close{position:absolute;top:2px;right:2px;} #close span{padding:3px 10px;background-color: #999;font-size:20px;color:white;cursor:pointer;} #log{display: none; width: 400px; height: 400px; padding: 30px 40px; background-color: #F3F5F6; position: fixed; top: 70px;; right: 30px;} .error{float:right;color:red;font-size:1.2em;margin-right:10px} </style> <link rel="stylesheet" > <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <body> <button onclick="document.getElementById('log').style.display='block'">彈出登錄框</button> <div id="log"> <form action="../control/logincheck.php" method="post"> <h3 >請(qǐng)登錄</h3> <div class="form-group"> <label for="username">用戶名*</label> <span id="user" class="error"> </span> <input type="text" class="form-control" name="username" id="username" placeholder="用戶名" onblur='checkName()' required /> </div> <div class="form-group"> <label for="password">密碼*</label> <span id="psword" class="error"> </span> <input type="password" class="form-control" name="password" id="password" placeholder="密碼" onblur='checkPassword()' required /> </div> <div class="checkbox"> <label> <span><input type="checkbox" value='true' style="width:15px;height:15px;" > 記住我</span> </label> </div> <input type="submit" class="btn btn-primary login-button" value="登錄" style="width:70px;height:40px;" /> <p class="text-success" ><a href="register.html">>>還沒賬號(hào)?去注冊(cè)</a></p> </form> <div id="close" > <span onclick="document.getElementById('log').style.display='none'">關(guān)閉</span> </div> </div> <script> var checkName=function() { document.getElementById("user").innerHTML =""; var name = eval(document.getElementById('username')).value; if (name.length > 20 || name.length < 1) document.getElementById("user").innerHTML = "用戶名長(zhǎng)度在1-20之間!" ; } var checkPassword = function(){ document.getElementById("psword").innerHTML =""; var name = eval(document.getElementById('password')).value; if (name.length > 12 || name.length < 6) document.getElementById("psword").innerHTML="密碼長(zhǎng)度在6-12之間!" ; } </script> </body> </html>
一種完全用AngularJS實(shí)現(xiàn)驗(yàn)證和提示的方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <h2>驗(yàn)證實(shí)例</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>用戶名:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用戶名是必須的。</span> </span> </p> <p>郵箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">郵箱是必須的。</span> <span ng-show="myForm.email.$error.email">非法的郵箱地址。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = '輸入用戶名'; $scope.email = '輸入密碼'; }); </script> </body> </html>
以上所述是小編給大家介紹的Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 使用BootStrap實(shí)現(xiàn)用戶登錄界面UI
- jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
- php bootstrap實(shí)現(xiàn)簡(jiǎn)單登錄
- 分享Bootstrap簡(jiǎn)單表格、表單、登錄頁(yè)面
- bootstrap flask登錄頁(yè)面編寫實(shí)例
- PHP實(shí)現(xiàn)登錄注冊(cè)之BootStrap表單功能
- 基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng),一個(gè)下拉菜單和登錄表單導(dǎo)航條)
- Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法
- Bootstrap實(shí)現(xiàn)前端登錄頁(yè)面帶驗(yàn)證碼功能完整示例
相關(guān)文章
基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03javascript 導(dǎo)出數(shù)據(jù)到Excel(處理table中的元素)
最近做的項(xiàng)目中有個(gè)要求,需要將數(shù)據(jù)導(dǎo)出到Excel中,關(guān)于這個(gè)就不是什么問題,網(wǎng)上的資料很多??僧?dāng)Table中有Input(text)之類的元素是怎么辦?2009-12-12JavaScript將頁(yè)面表格導(dǎo)出為Excel的具體實(shí)現(xiàn)
如何將頁(yè)面表格導(dǎo)出為Excel,這在日常工作中很常見,下面為大家詳細(xì)的介紹下使用JavaScript是如何實(shí)現(xiàn)的2013-12-12JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù),實(shí)例分析了javascript實(shí)現(xiàn)冪運(yùn)算的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04