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 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
layui原生表单验证的实例
Sep 09 Javascript
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
Terran剧情介绍
2020/03/14 星际争霸
PHP生成静态页面详解
2006/12/05 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP多维数组排序array详解
2017/11/21 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
Javascript实现的分页函数
2006/12/22 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Python中datetime模块参考手册
2017/01/13 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
介绍一下XMLHttpRequest对象
2012/02/12 面试题
办理暂住证介绍信
2014/01/11 职场文书
中学运动会广播稿
2014/01/19 职场文书
商场主管竞聘书
2014/03/31 职场文书
房屋租赁意向书
2014/04/01 职场文书
亲子活动总结
2014/04/26 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技