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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
微信JS接口大全
Aug 25 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
TS 类型兼容教程示例详解
Sep 23 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python3中的json模块使用详解
2018/05/05 Python
pandas重新生成索引的方法
2018/11/06 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python 实现波浪滤镜特效
2020/12/02 Python
八年级音乐教学反思
2014/01/09 职场文书
小学生班会演讲稿
2014/01/09 职场文书
幸福中国演讲稿
2014/09/12 职场文书
营销总监岗位职责
2014/09/16 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
javascript对象3个属性特征
2021/11/17 Javascript
vue使用element-ui按需引入
2022/05/20 Vue.js