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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jQuery取id有.的值的方法
May 21 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
AngularJS指令用法详解
Nov 02 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
Openlayers实现测量功能
Sep 25 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使用qr生成二维码的示例分享
2014/01/20 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php实现的递归提成方案实例
2015/11/14 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Javascript与vbscript数据共享
2007/01/09 Javascript
javascript import css实例代码
2008/07/18 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
深入理解vue中的$set
2017/06/01 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python安装后的目录在哪里
2020/06/21 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
如何用Python绘制3D柱形图
2020/09/16 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
房屋改造计划书
2014/01/10 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
通报表扬范文
2015/01/17 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python