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. 代码注释，神兽护体，代码无bug

    /** * * ━━━━━━神兽出没━━━━━━ * ┏┓ ┏┓ * ┏┛┻━━━┛┻┓ * ┃ ┃ * ┃ ━ ┃ * ┃ ┳┛ ┗┳ ┃ * ┃ ┃ * ┃ ┻ ┃ * ┃ ┃ * ┗━┓ ┏━┛ ...

  2. POJ 2251 Dungeon Master bfs 难度:0

    http://poj.org/problem?id=2251 bfs,把两维换成三维,但是30*30*30=9e3的空间时间复杂度仍然足以承受 #include <cstdio> #inc ...

  3. Faces人脸识别项目简介

    Faces人脸识别 分为两个模块,Faces文件夹下存放人脸识别算法的代码,Web文件夹下存放网站搭建的代码 详情请查看各个模块下的readme文档 项目简介 核心算法 一款基于Dlib.opencv ...

  4. Custom Ribbon in SharePoint 2010 & which not wrok when migrate from 2010 to 2013

    博客地址 http://blog.csdn.net/foxdave 1. First of all, let me show you the ribbon modal in our project w ...

  5. New Concept English Two 22 58

    $课文56  比声音还快! 579. Once a year, a race is held for old cars. 旧式汽车的比赛每年举行一次. 580. A lot of cars enter ...

  6. Python windows ping

    # -*- coding: utf-8 -*- import os # 参考文档: # Ping to a specific IP address using python [duplicate] # ...

  7. 升级到SQL Server 2012/2014时一些需要考虑的事项

    1. 使用Upgrade Adviser评估升级前需要解决的事情. https://msdn.microsoft.com/zh-cn/library/ms144256(v=sql.110).aspx ...

  8. gcc编译器配置

    一.使用交叉编译器编译 1.安装交叉编译工具链 2.导出环境变量 [ubuntu @tmp]$ export PATH=$PATH:/usr/local/oecore-x86_64/sysroots/ ...

  9. windows7下安装python环境和django

    1.安装python 1.1.首先访问http://www.python.org/download/去下载最新的python版本. 根据计算机位数选择对应的版本比如我的机器是64位的,我就下载这个安装 ...

  10. windows默认文件浏览器大小

    windows打开之后,发现默认窗口很小.