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 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
使用js显示当前时间示例
Mar 02 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Angular的MVC和作用域
Dec 26 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
javascript canvas封装动态时钟
Sep 30 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
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python中的filter()函数的用法
2015/04/27 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python循环语句中else的用法总结
2016/09/11 Python
基于python时间处理方法(详解)
2017/08/14 Python
python 获取url中的参数列表实例
2018/12/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
销售主管岗位职责
2014/02/08 职场文书
幼师中班个人总结
2015/02/12 职场文书
清洁工工作总结
2015/08/11 职场文书
校运会班级霸气口号
2015/12/24 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
MySQL数据库事务的四大特性
2022/04/20 MySQL