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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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计算十二星座的函数代码
2012/08/21 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
Vuex 入门教程
2018/01/10 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
js实现导航跟随效果
2018/11/17 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python实现测试磁盘性能的方法
2015/03/12 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python re模块的高级用法详解
2018/06/06 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
运行时异常与一般异常有何异同?
2014/01/05 面试题
2015年班主任德育工作总结
2015/05/21 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
大队委员竞选稿
2015/11/20 职场文书