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="">会员注册</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之综合案例的更多相关文章

  1. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. DOM综合案例、SAX解析、StAX解析、DOM4J解析

    今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...

  3. JavaEE Tutorials (30) - Duke综合案例研究示例

    30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...

  4. jquery-easyUI第二篇【综合案例】

    基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...

  5. CSS3_综合案例

    综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...

  6. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

  7. Winform开发框架中的综合案例Demo

    在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...

  8. 【原创 Hadoop&Spark 动手实践 13】Spark综合案例：简易电影推荐系统

    [原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统

  9. Ext.js入门：常用组件与综合案例（七）

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

随机推荐

  1. $state和$rootScope.$on($stateChangeStart)

    这两者的区别:请看博客:http://stackoverflow.com/questions/32680292/angularjs-state-and-rootscope-onstatechanges ...

  2. JVM虚拟机调优指南

    本章通过阅读JVM垃圾搜集指南文档,整理虚拟机主要配置以及,理解不同的垃圾搜集器. 垃圾搜集算法 引用计数算法 根搜索算法 标记-清除算法 复制算法 标记-整理算法 分代收集算法 搜集算法网上有很多介 ...

  3. Andrew and Taxi CodeForces - 1100E (思维,拓扑)

    大意: 给定有向图, 每条边有一个权值, 假设你有$x$个控制器, 那么可以将所有权值不超过$x$的边翻转, 求最少的控制器数, 使得翻转后图无环 先二分转为判定问题. 每次check删除能动的边, ...

  4. HDU 4004 二分

    The Frog's Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...

  5. UVA-1617 Laptop （贪心）

    题目大意:有n条长度为1的线段,n个区间,第i条线段在第i个区间中,问线段之间的最少间隙有几个. 题目分析:先对区间排序,先按右端点排,再按左端点排.有重叠的区间(仅有交点重叠也视为重叠)之间一定可以 ...

  6. hdu 3685 10 杭州 现场 F - Rotational Painting 重心 计算几何 难度:1

    F - Rotational Painting Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  7. 学习笔记20151211——AXI4 STREAM DATA FIFO

    AXI4 STREAM DATA FIFO是输入输出接口均为AXIS接口的数据缓存器,和其他fifo一样是先进先出形式.可以在跨时钟域的应用中用于数据缓冲,避免亚稳态出现.支持数据的分割和数据拼接.在 ...

  8. New Concept English Two 8 19

    pls  practice every day $课文17 青春常驻 161. My aunt Jennifer is an actress. 我的姑姑詹妮弗是位演员, 162. She must b ...

  9. springmvc的表单标签

    1. Spring提供的轻量级标签库 2.可在JSP页面中渲染HTML元素的标签 3 用法 1)必须在JSP页面的开头处声明taglib指令 <%@ taglib prefix="fm ...

  10. SpringBoot启动报：Caused by: java.lang.IllegalArgumentException: At least one JPA metamodel must be present!

    使用spring boot对项目改造,启动报错: Caused by: java.lang.IllegalArgumentException: At least one JPA metamodel m ...