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筛选器全系列介绍
Aug 27 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
原型和原型链 prototype和proto的区别详情
Nov 02 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
php仿ZOL分页类代码
2008/10/02 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
教师考核鉴定意见
2015/06/05 职场文书
付款证明模板
2015/06/19 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL