2. 程式人生 > >7_bootstap之綜合案例

7_bootstap之綜合案例

阿新 • • 發佈：2018-12-06

13、綜合案例

13.1、案例需求

要求：頁面頂部的三部分在PC螢幕上顯示為一行，在移動裝置螢幕上顯示為一部分一行；
導航條在大螢幕展示全部內容，在移動裝置上需要將內容能夠摺疊/展開；
使用者名稱/密碼/確認密碼不能為空，密碼需和確認密碼一致，如果不符合，阻止註冊操作，並將錯誤資訊展示給使用者看。
　　     onsubmit

13.2、需求分析

13.3、案例實現

<script>   

     //密碼和確認密碼一致性校驗

     //前提：密碼和確認密碼必須填寫

     function checkPwdAndRepwd(f1,f2){

     
 
if(f1&&f2){

     //密碼和確認密碼不為空，進行非空校驗

     //1、密碼和確認密碼 值拿到

     var pwd=document.getElementById("password").value;

     var repwd=document.getElementById("repassword").value;

     var msg=document.getElementById("repasswordMsg");

     var div=document.getElementById("repasswordDiv");

     
 
//2、一致性判斷

     if(pwd==repwd){

     div.className="form-group";

       msg.innerHTML="";

     return true;

     }else{

     div.className+=" has-error";

       msg.innerHTML="必須和密碼一致";

     return false;

     }

     }else{

     //密碼和確認密碼有一個為空，直接返回false

     return false;

     }

     }

    

      
 
//非空校驗

     function checkNotNull(nid){

     //1、獲取表單輸入項 元素物件

     var nodex=document.getElementById(nid);

     //獲取對應的錯誤資訊回顯 label元素

     var msg=document.getElementById(nid+"Msg");

     //獲取對應的DIV

     var div=document.getElementById(nid+"Div");

     //2、對進行非空判斷

     var reg = /^\s*$/;//如果有0~多個空白符，就為true

     if(reg.test(nodex.value)){

     //資訊不合格

     div.className+=" has-error";

     msg.innerHTML="不能為空";

     return false;

     }else{

     //資訊合格

     div.className="form-group";

     msg.innerHTML="";

     return true;

     }

     }

    

     //表單校驗方法

     function checkForm(){

     //使用者名稱

     var flag1=checkNotNull("username");

     //密碼

     var flag2=checkNotNull("password");

     //確認密碼

     var flag3=checkNotNull("repassword");

     //一致性校驗

     var flag4=checkPwdAndRepwd(flag2,flag3);

     return flag1&&flag2&&flag3&&flag4;

     }

    </script>

  </head>

  <body>

   <div class="container">

     <!-- 網站頭部 -->

     <div class="row">

      <div class="col-md-4">

      <img src="../img/logo2.png" />

      </div>

      <div class="col-md-4">

      <img src="../img/header.png" />

      </div>

      <div class="col-md-4">

      <ul class="list-inline" style="margin-top:10px;">

      <li><a href="" class="btn btn-primary">登入</a></li>

      <li><a href="" class="btn btn-primary">註冊</a></li>

      <li><a href="" class="btn btn-danger">購物車</a></li>

      </ul>

      </div>

     </div>

     <!--  導航條 -->

     <nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">首頁</a>

    </div>

 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">手機數碼<span class="sr-only">(current)</span></a></li>

        <li><a href="#">電腦辦公</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多
  <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">母嬰用品</a></li>

            <li><a href="#">汽車配件</a></li>

            <li role="separator" class="divider"></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-right" role="search">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

    </div>

  </div>

</nav>

     <!-- 註冊頁面主體-->

     <div class="row" style="background-image: url(../img/regist_bg.jpg)">

      <div class="col-sm-8 col-sm-offset-2" style="border:5px solid gainsboro;">

      <!-- 表單部分 -->

      <div class="row">

      <div class="col-sm-8 col-sm-offset-2">

      <font color="#204D74" size="4">會員註冊</font>

      </div>

      </div>

      <form class="form-horizontal" onsubmit="return checkForm()">

  <div id="usernameDiv" class="form-group">

    <label class="col-sm-2 control-label">使用者名稱</label>

    <div class="col-sm-8">

      <input type="text" class="form-control" id="username" name="username" placeholder="請輸入使用者名稱">

    </div>

    <label id="usernameMsg" class="col-sm-2 control-label"></label>

  </div>

  

  <div id="passwordDiv" class="form-group">

    <label class="col-sm-2 control-label">密碼</label>

    <div class="col-sm-8">

      <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">

    </div>

    <label id="passwordMsg" class="col-sm-2 control-label"></label>

  </div>

  <div id="repasswordDiv" class="form-group">

    <label class="col-sm-2 control-label">確認密碼</label>

    <div class="col-sm-8">

      <input type="password" class="form-control" id="repassword" placeholder="請輸入確認密碼">

    </div>

    <label id="repasswordMsg" class="col-sm-2 control-label"></label>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">email</label>

    <div class="col-sm-8">

      <input type="text" class="form-control" id="email" name="email" placeholder="請輸入email">

    </div>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">姓名</label>

    <div class="col-sm-8">

      <input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名">

    </div>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">性別</label>

    <div class="col-sm-8">

      <input type="radio" name="sex" value="man" checked="checked"/>男

      <input type="radio" name="sex" value="woman"/>女

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <input type="submit" class="btn btn-danger btn-lg" value=" 注 冊 "/>

    </div>

  </div>

</form>

      </div>

     </div>

     <!-- 網站底部 -->

     <div class="row">

      <div class="col-xs-12">

      <img src="../img/footer.jpg" width="100%"/>

      </div>

     </div>

     <div class="row">

      <div class="col-xs-12 text-center">

      <ul class="list-inline">

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      <li><a href="">聯絡我們</a></li>

      </ul>

      </div>

     </div>

     <div class="row">

      <div class="col-xs-12 text-center">

      Copyright © 2005-2020 淘寶商城 版權所有

      </div>

     </div>

   </div>

  </body>

 

相關推薦

7_bootstap之綜合案例

13、綜合案例 13.1、案例需求 要求：頁面頂部的三部分在PC螢幕上顯示為一行，在移動裝置螢幕上顯示為一部分一行； 導航條在大螢幕展示全部內容，在移動裝置上需要將內容能夠摺疊/展開； 使用者名稱/密碼/確認密碼不能為空，密碼需和確認密碼一致，如果不符合，阻止註冊操作，並將錯誤資訊展示給使

三十五、python學習之Flask框架(七)資料庫:Flask對資料庫的基本操作、常見關係模板、資料庫遷移、綜合案例:圖書管理

補充:   使用SQL_Alchemy定義一個模型類,不可以不指定primary_key=True建立表. 一、資料庫基本操作 1. 資料庫的基本操作(CRUD): 在Flask-SQLAlchemy中，插入、修改、刪除操作，均由資料庫會話管理。

Winform開發框架中的綜合案例Demo

alt inf 效果 win 不同 自動 同時 ref 閃光點 在實際的系統開發中，我們往往需要一些簡單的的案例代碼，基於此目的我把Winform開發框架中各種閃光點和不錯的功能，有些是我們對功能模塊的簡單封裝，而有些則是引入了一些應用廣泛的開源組件進行集成使用，因此把它們

《大話設計模式》——讀後感 （8）好菜每回味不同——建造者模式之基礎案例（1）

ted builds src ret 分離 args 類圖 rec 方法 建造者模式：是將一個復雜的對象的構建與它的表示分離，使得同樣的構建過程可以創建不同的表示。 建造者模式通常包括下面幾個角色： 1. builder：給出一個抽象接口，以規範產品對象的各個組成成分的

綜合案例分析（sort,cut,正則）

sbin ati bsp ima 如何 難點 一次 方法 當前 1、 找出ifconfig “網卡名” 命令結果中本機IPv4地址 分析： 解釋：要取出ip地址，首先我們可以先取出ip所在的行，即取行；可以結合head和tail，後面會有 更好的方法去取行，取列當然

綜合案例

parse 分解質因數 字符串 isf read 核桃 left ice adl 6-1-水仙花數（最少是3位數） 是指一個n位數（n≥3),它的每個位上的數字的n次冪之和等於它本身 例：在控制臺中輸出1000以內的所有水仙花數查找問題查找樣本：100-999查找目標：是

Mysql綜合案例

mys mil 年齡 同學 primary 表示 align 出了 pro Mysql綜合案例 考核要點：創建數據表、單表查詢、多表查詢 　　已知，有一個學生表student和一個分數表score，請按要求對這兩個表進行操作。student表和score分數表的表結構分別如

SylixOS調試方法詳解——綜合案例分析

調試 應用1. SylixOS調試方法介紹SylixOS實現了一個功能強大的調試stub（樁），可在設備或模擬器上在線調試應用程序，RealEvo-IDE也提供配套的調試插件。目前RealEvo-IDE既支持自動推送調試、也支持傳統的手動啟動gdbserver的調試方式。在官方公布的使用手冊中沒有詳細寫出在日

vue組件父子間通信之綜合練習--假的聊天室

ner name type 屬性 urn ejs rec 用戶輸入 for <!doctype html> <html> <head> <meta charset="UTF-8"> <title>組件父

學習react-簡單小案例(5)--綜合案例

edi htm document turn reat prop comment creat ops <html> <head> <title></title> <meta cha

大數據入門第十三天——離線綜合案例：網站點擊流數據分析

采集 點擊流 http mda ont strong inf gif amp 推薦書籍：《網站分析實戰——如何以數據驅動決策，提升網站價值》 相關隨筆：http://blog.csdn.net/u014033218/article/details/

網易公開課系列-國防科大公開課-數學建模-第九講-數學建模綜合案例

image ont 建模 科學技術 bubuko http 學技術 所有 數學建模 數學建模----從自然走向理性之路第九講 數學建模綜合案例國防科學技術大學 吳孟達 教授課程鏈接：http://open.163.com/special/cuvocw/shuxuejianm

PHP Socket 編程之9個主要函數的使用之測試案例

客戶 alt sockets 參考 作用 ket mysq nec udp php的socket編程算是比較難以理解的東西吧，不過，我們只要理解socket幾個函數之間的關系，以及它們所扮演的角色，那麽理解起來應該不是很難了，在筆者看來，socket編程，其實就是建立一個網

03_java基礎（九）之綜合練習與考核評估

中小型企業網絡構建之綜合布線和子網劃分

中小型企業網絡構建之綜合布線和子網劃分中小型企業網絡構建之綜合布線和子網劃分一、布線系統概述1、布線系統的概念建築物綜合布線系統（PDS）是一個用於傳輸語言、數據、影響和其他信息的標準結構化不限系統。2、綜合布線系統分為六個獨立的子系統-- 工作區子系統：工作區子系統由終端設備連接到信息插座之間的設備組成。包

C++——類的綜合案例——純虛函數與抽象類( 加強對接口與多態，以及派生類構造函數的理解 )

構造 set 由於 技術 als str wid choice gre 註意派生類構造函數的寫法。 1 #include <iostream> 2 3 using namespace std; 4 5 enum COLOR {

Hive SQL綜合案例

嚴格 存在 排序規則 連接 是我 語文課 sub 規則 年齡 一 Hive SQL練習之影評案例 案例說明 現有如此三份數據：1、users.dat 數據格式為： 2::M::56::16::70072， 共有6040條數據對應字段為：UserID BigInt, G

爬蟲——綜合案例流程版

定義 dfs 規範 地址 存在 加密 通過 編寫 agen 爬蟲綜合案例 開發步驟： 導入類庫 創建爬蟲通用類 初始化init方法 類中編寫重試下載模塊 類中編寫真正下載模塊 類外編寫保存函數 類外編寫獲取robots.txt函數 類外編寫抽取網址函數 類中編寫網址正常化

五十七、檢視、模板配合使用，缺一不可、MVT綜合案例

一、檢視函式的使用 注意：檢視函式必須有一個引數request，進行處理之後，需要返回一個HttpResponse的類物件， hello python就是返回給瀏覽器顯示的內容。 1、在專案的views.py 檔案中寫入函式 2、進行url配置：建立url地址和檢視的對應關

JavaEE-jsp、el、jstl和顯示使用者綜合案例

1. jsp基礎 1.1 jsp概念 JSP(java server Pages)，java的伺服器頁面，裡面包含html和java程式碼。其中html負責靜態內容，Java程式碼負責動態內容。 特點： 跨平臺 業務程式碼相分離