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 锁定弹出层实现代码
Feb 23 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python教程之全局变量用法
2016/06/27 Python
python与php实现分割文件代码
2017/03/06 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
pytorch梯度剪裁方式
2020/02/04 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
用Python制作音乐海报
2021/01/26 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
建设工地安全标语
2014/06/07 职场文书
企业精神口号
2014/06/11 职场文书
植树造林的宣传标语
2014/06/23 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
听证通知书
2015/04/24 职场文书
道歉的话语大全
2015/05/12 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS