Bootstrap弹出带合法性检查的登录框实例代码【推荐】
作者：会开花的树- 发布时间：2024-04-16 08:49:54
标签：bootstrap,弹出框,登录框
最近做了一个项目其中有项目需求涉及到访问控制，在访问需要登录才能使用的页面或功能时，会弹出登录框：
效果如下：
图 1-点击用户名时，如未登录弹出登录框
对这个功能的详细描述：
不涉及到登录时，登录框隐藏
涉及到登录时，登录框弹出到页面左上角
登陆成功后登录框隐藏
实现思路：
在body结束标签之前插入登录的div,设其定位方式为absolute，位置在左上角。
登录框默认的display属性为none。触发登录时，将该属性改为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" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//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 >请登录</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">>>还没账号？去注册</a></p>
</form>
<div id="close" >
<span onclick="document.getElementById('log').style.display='none'">关闭</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 = "用户名长度在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="密码长度在6-12之间！" ;
}
</script>
</body>
</html>
一种完全用AngularJS实现验证和提示的方法：
<!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>验证实例</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弹出带合法性检查的登录框实例代码【推荐】网站的支持！
0
投稿猜你喜欢
- 1，登录后默认自动选中My Objects 默认情况下，PLSQL Developer登录后，Brower里会选择All objects，如
- selenium关闭窗口有两个方法，close与quit，我们稍作研究便知道这两个方法的区别。1.看源码或API这是close()的说明：C
- 删除备份和还原历史记录表中所有早于 oldest_date 的备份集的项目。由于执行备份或还原操作时会在备份和还原历史记录表中添加行，sp_
- 一、密码字典所谓密码字典，主要是配合解密使用，一般情况用来暴力破解密码，是由指定字符排列组合组成的文本文件。如果知道密码设置的规律指定性生成
- 主要问题为什么argv中第一个，即index=0的内容就是文件名？python中argc是用什么实现的？概念解释argc:argument
本文实例为大家分享了pycharm实现猜数游戏的具体代码，供大家参考，具体内容如下1. 设计界面如下所示，利用QTdesigner设计的界面- 说明：Go 语言切片是对数组的抽象。Go 数组的长度不可改变，在特定场景中这样的集合就不太适用，Go中提供了一种灵活，功能强悍的内置类型切片
- 在开发django应用的过程中，使用开发者模式启动服务是特别方便的一件事，只需要 python manage.py runserver 就可
- 有个Q友问怎么写个程序能按照要求输入，再输出对应形状的面积？我大概写了几行，没有考虑输出异常，重点想记录下 int 的接收，如下图知识点就两
- 今天因工作需要写了个小程序，用于在图片集中自动抽取需要的照片。该程序只是实现了基本功能，还有很多需要完善的地方，展示出来算是给自己鼓鼓气吧。
- base64模块是用来作base64编码解码的。这种编码方式在电子邮件中是很常见的。它可以把不能作为文本显示的二进制数据编码为可显示的文本信
- 一、Scrapy是什么Scrapy 是一个基于 Twisted 的异步处理框架，是纯 Python 实现的爬虫框架，其架构清晰，模块之间的耦
- 本文实例讲述了Python异常处理操作。分享给大家供大家参考，具体如下：一、异常处理的引入>>>whileTrue:try
- 1、引言小 * 丝：鱼哥，最近有点不像话了。小鱼：嗯？？ 啥个意思嘛~小 * 丝：一周了，没分享小知识了。小鱼：就因为这个？？小 * 丝：那是，我这么爱
- 大家好，我是了不起！在某些难以抉择得时候，我们经常要用外力来帮助我们做出选择比如，梁山出征方腊前沙场点兵，挑选先锋的场景这个时候
- Pygame模块一览表：引入pygame模块 ,若本机没有请自行pip install pygame#载入必要的模块import pygam
- 今天整理之前写的代码，发现在做数模期间写的用python实现的遗传算法，感觉还是挺有意思的，就拿出来分享一下。首先遗传算法是一种优化算法，通
- 学了一个礼拜Python之后写的，代码很粗糙，只是为了完成利用163邮箱远程关电脑功能。直接把代码发上来吧。要执行的话得先安装一些模块，看i
- 一、命令提示符窗口安装卸载1、安装第一种，最常用的，初学者也是基本都是用的这个方法，直接在cmd里面安装。首先键盘按住win+r就会弹出来运
- 1.C++ 代码Demo.h#pragma oncevoid GeneratorGaussKernel(int ksize, float s
