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. Learn Rails5.2 Routes。（ 很少用到的参数：constraints和redirect）

    Naming a Route get 'home/index', as: "different_name" 会得到prefix: different_name代替home_inde ...

  2. 缓存cache(5.2新：redis)： gem faker （6600✨） 命令行工具curl（系统内置，可在git上看到文档）

    ⚠️本章节记录缓存的一些方法的用法案例,配合这篇博客一起阅读:https://i.cnblogs.com/EditPosts.aspx?postid=8776632  前置种子 https://git ...

  3. Linux命令详解-whatis

    描述一个命令执行什么功能. 1．命令格式: whatis [ -M PathName ] Command ... 2．命令功能: 描述一个命令执行什么功能. 3．命令参数:     -M PathNa ...

  4. 在页面和请求中分别使用XML Publisher生成PDF报表且自动上传至附件服务器

    两个技术要点: 1.使用TemplateHelper.processTemplate方法生成目标PDF的InputStream流,再使用ftp中上传流的方法将其上传至附件服务器. 2.在请求中调用AM ...

  5. run jdeveloper, unable to create an instance of the Java Virtual Machine Located at path:

    刚才打开 jdevW.exe 时提示如下错误: Unable to create an instance of the Java Virtual MachineLocated at path:x:\x ...

  6. Work Queues(点对多)

    Work Queues(点对多) 多个消费者在同一个消息队列中获取消息的情况.在有些应用当中,消费端接收到消息任务需要长时间的处理,如果等上一个消息处理完成以后再取下一个数据进行处理的话,势必会有一些 ...

  7. hdu 6144 Arithmetic of Bomb

    Arithmetic of Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. MAC环境下 Android P 系统源码下载、编译、导入到AS、Pixel2xl刷机 实战

    一.下载源码 1 . 确保主目录下有一个 bin/ 目录,并且该目录包含在路径中: mkdir ~/bin PATH=~/bin:$PATH 2 . 下载 Repo 工具,并确保它可执行: curl ...

  9. flex布局在垂直居中里，元素超过容器大小后，不能通过滚动条滚动到顶端，这是个flex的bug

    The Problem Flexbox makes centering very easy. By simply applying align-items: center and justify-co ...

  10. 启动tornado项目，hello world

    新建一个env虚拟环境 mkvirtualenv toenv 在虚拟环境中安装tornado workon toenv pip install tornado 在D盘中新建tornado项目文件夹,就 ...