Bootstrap弹出带合法性检查的登录框实例代码【推荐】


Posted in Javascript onJune 23, 2016

最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框:

效果如下:

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弹出带合法性检查的登录框实例代码【推荐】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 #Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 #Javascript
JavaScript自学笔记(必看篇)
Jun 23 #Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 #Javascript
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
开源Web应用框架Django图文教程
2017/03/09 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python实现彩票系统
2020/06/28 Python
Django实现学生管理系统
2019/02/26 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
精彩的推荐信范文
2013/11/26 职场文书
文艺演出策划方案
2014/06/07 职场文书
人大调研汇报材料
2014/08/14 职场文书
民主评议党员工作总结
2014/10/20 职场文书
初中作文评语集锦
2014/12/25 职场文书
工程资料员岗位职责
2015/04/13 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技