Bootstrap实现前端登录页面带验证码功能完整示例


Posted in Javascript onMarch 26, 2020

本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考,具体如下:

Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css、js在使用前要在开头引入

上代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 告诉浏览器网页所识别的文件类型及语言类型 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>登录</title>
  <!-- 让一些搜索引擎搜索到你的网页 -->
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="external nofollow" > 
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  <script src="tool.js"></script>
  <style>
  .carousel-inner img {
    width:100%;
    height:100%;
  }
  .jumbotron {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-top: 10px;
  }
  #demo {
    width:100%;
    height: 500px;
  }
  .row {
    height: 264px;
  }
  .left {
    float: left;
    width: 70%;
  }
  .right {
    float: left;
    width: 30%;
  }
  .card {
    height: 340px;
  }
  .carousel-inner {
    height: 500px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 60px;
  }
  .jumheight1 {
    height: 100px;
  }
  .jumheight2 {
    height: 100px;
  }
  .end_name {
    margin-bottom: 5px;
  }
  .footer2 {
    padding-top: 210px;
    text-align: center;
  }
  .test{
    margin-bottom: 75px;
  }
  .carousel-control-prev,
  .carousel-control-next{
    bottom: 120px;
  }
  </style>
</head>
<body>
  <div>
    <form class="form active" method="post" action="{:url('index/Login/doLogin')}">
    <div class="jumbotron text-info bg-light jumheight1">
      <h1>图书阅读网</h1>
      <p>一个免费的图书网站</p>
    </div>
    <!-- 轮播图 -->
    <!-- 指示符 -->
    <div class="row">
    <div class="left">
    <div id="demo" class="carousel slide " data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
        </div>
        <div class="carousel-item">
          <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
        </div>
        <div class="carousel-item">
          <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
        </div>
      </div>
      <!-- 左右切换按钮 -->
      <a href="#demo" rel="external nofollow" rel="external nofollow" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#demo" rel="external nofollow" rel="external nofollow" class="carousel-control-next" data-slide=next>
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
    </div>
    <div class="right">
    <!-- 登陆窗口 -->
    <div class="card">
      <div class="card-header">
        用户登陆
      </div>
      <div class="card-body">
        <form>
          <table style="border-collapse: separate;/*border-spacing: 30px 20px;*/">
            <tr>
              <td class="margin-top:10">
                <label>电话号码:</label>
              </td>
              <td>
                  <input type="text" name="username" pattern="^\d{11}" id="username" class="form-control" placeholder="请输入您的电话号码">
                <!-- <input type="text" name="username" pattern="^\d{11}" id="username" class="form-control" placeholder="请输入您的电话号码" required> -->
              </td>
              
            </tr>
            <tr>
              <td>
                <label>密码:</label>
              </td>
              <td>
                <input type="password" name="password" id="password" class="form-control" placeholder="请输入您的密码">
                
              </td>
            </tr>
              <tr>
              <td>
                <label for="captcha" class="test">验证码:</label> 
              </td>
              <td> 
                
                <input type="text" name="captcha" class="form-control "  id="captcha" placeholder="请输入验证码">
                <!-- 点击验证码更换 -->
                <br>
                <div class="code-img"><img height="50px" src="{:captcha_src()}" alt="captcha" onClick="this.src='{:captcha_src()}?'+Math.random()"/></div>
              </td>
            </tr>        
          </table>
          <div class="footer"> 
          <button type="submit" class="btn btn-primary" >登陆</button>
          <button type="submit" class="btn btn-secondary " formaction="{:url('index/Repassword/index')}" >忘记密码?</button> 
          </div>
        </form>
      </div>
    </div>
    </div>
    </div>
    
    </div>
  </div>
  <script>
    fieldTest();
  </script>
</body>
</html>

效果图:

Bootstrap实现前端登录页面带验证码功能完整示例

这里还有轮播图,点击验证码时会更新

可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
javascript中检测变量的类型的代码
Dec 28 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jquery提示效果实例分析
Nov 25 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
js中switch语句的学习笔记
Mar 25 #Javascript
JS实现进度条动态加载特效
Mar 25 #Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 #Javascript
javascript+css实现进度条效果
Mar 25 #Javascript
You might like
php相当简单的分页类
2008/10/02 PHP
php反射应用示例
2014/02/25 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
AngularJS内置指令
2015/02/04 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
车辆转让协议书
2014/04/15 职场文书
负责人任命书范本
2014/06/04 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
入党介绍人意见范文
2015/06/01 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS