13、综合案例

13.1、案例需求

  1. 要求：页面顶部的三部分在PC屏幕上显示为一行，在移动设备屏幕上显示为一部分一行；
  2. 导航条在大屏幕展示全部内容，在移动设备上需要将内容能够折叠/展开；
  3. 用户名/密码/确认密码不能为空，密码需和确认密码一致，如果不符合，阻止注册操作，并将错误信息展示给用户看。
  4. 　　     onsubmit

13.2、需求分析

13.3、案例实现

  1. <script>   
  2.  
  3.      //密码和确认密码一致性校验
  4.  
  5.      //前提：密码和确认密码必须填写
  6.  
  7.      function checkPwdAndRepwd(f1,f2){
  8.  
  9.      if(f1&&f2){
  10.  
  11.      //密码和确认密码不为空，进行非空校验
  12.  
  13.      //1、密码和确认密码 值拿到
  14.  
  15.      var pwd=document.getElementById("password").value;
  16.  
  17.      var repwd=document.getElementById("repassword").value;
  18.  
  19.      var msg=document.getElementById("repasswordMsg");
  20.  
  21.      var div=document.getElementById("repasswordDiv");
  22.  
  23.      //2、一致性判断
  24.  
  25.      if(pwd==repwd){
  26.  
  27.      div.className="form-group";
  28.  
  29.        msg.innerHTML="";
  30.  
  31.      return true;
  32.  
  33.      }else{
  34.      div.className+=" has-error";
  35.        msg.innerHTML="必须和密码一致";
  36.      return false;
  37.      }
  38.      }else{
  39.      //密码和确认密码有一个为空，直接返回false
  40.      return false;
  41.      }
  42.      }
  43.  
  44.       //非空校验
  45.      function checkNotNull(nid){
  46.      //1、获取表单输入项 元素对象
  47.      var nodex=document.getElementById(nid);
  48.      //获取对应的错误信息回显 label元素
  49.      var msg=document.getElementById(nid+"Msg");
  50.      //获取对应的DIV
  51.      var div=document.getElementById(nid+"Div");
  52.      //2、对进行非空判断
  53.      var reg = /^\s*$/;//如果有0~多个空白符，就为true
  54.      if(reg.test(nodex.value)){
  55.      //信息不合格
  56.      div.className+=" has-error";
  57.      msg.innerHTML="不能为空";
  58.      return false;
  59.      }else{
  60.      //信息合格
  61.      div.className="form-group";
  62.      msg.innerHTML="";
  63.      return true;
  64.      }
  65.      }  
  66.  
  67.      //表单校验方法
  68.      function checkForm(){
  69.      //用户名
  70.      var flag1=checkNotNull("username");
  71.      //密码
  72.      var flag2=checkNotNull("password");
  73.      //确认密码
  74.      var flag3=checkNotNull("repassword");
  75.      //一致性校验
  76.      var flag4=checkPwdAndRepwd(flag2,flag3);
  77.      return flag1&&flag2&&flag3&&flag4;
  78.      }
  79.     </script>
  80.   </head>
  81.   <body>
  82.    <div class="container">
  83.      <!-- 网站头部 -->
  84.      <div class="row">
  85.       <div class="col-md-4">
  86.       <img src="../img/logo2.png" />
  87.       </div>
  88.       <div class="col-md-4">
  89.       <img src="../img/header.png" />
  90.       </div>
  91.       <div class="col-md-4">
  92.       <ul class="list-inline" style="margin-top:10px;">
  93.       <li><a href="" class="btn btn-primary">登录</a></li>
  94.       <li><a href="" class="btn btn-primary">注册</a></li>
  95.       <li><a href="" class="btn btn-danger">购物车</a></li>
  96.       </ul>
  97.       </div>
  98.      </div>
  99.      <!--  导航条 -->
  100.      <nav class="navbar navbar-inverse">
  101.   <div class="container-fluid">
  102.     <div class="navbar-header">
  103.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  104.         <span class="sr-only">Toggle navigation</span>
  105.         <span class="icon-bar"></span>
  106.         <span class="icon-bar"></span>
  107.         <span class="icon-bar"></span>
  108.       </button>
  109.       <a class="navbar-brand" href="#">首页</a>
  110.     </div>
  111.  
  112.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  113.       <ul class="nav navbar-nav">
  114.         <li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
  115.         <li><a href="#">电脑办公</a></li>
  116.         <li class="dropdown">
  117.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多
      <span class="caret"></span></a>
  118.           <ul class="dropdown-menu">
  119.             <li><a href="#">母婴用品</a></li>
  120.             <li><a href="#">汽车配件</a></li>
  121.             <li role="separator" class="divider"></li>
  122.          </ul>
  123.         </li>
  124.       </ul>
  125.       <form class="navbar-form navbar-right" role="search">
  126.         <div class="form-group">
  127.           <input type="text" class="form-control" placeholder="Search">
  128.         </div>
  129.         <button type="submit" class="btn btn-default">Submit</button>
  130.       </form>
  131.     </div>
  132.   </div>
  133. </nav>
  134.      <!-- 注册页面主体-->
  135.      <div class="row" style="background-image: url(../img/regist_bg.jpg)">
  136.       <div class="col-sm-8 col-sm-offset-2" style="border:5px solid gainsboro;">
  137.       <!-- 表单部分 -->
  138.       <div class="row">
  139.       <div class="col-sm-8 col-sm-offset-2">
  140.       <font color="#204D74" size="">会员注册</font>
  141.       </div>
  142.       </div>
  143.       <form class="form-horizontal" onsubmit="return checkForm()">
  144.   <div id="usernameDiv" class="form-group">
  145.     <label class="col-sm-2 control-label">用户名</label>
  146.     <div class="col-sm-8">
  147.       <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
  148.     </div>
  149.     <label id="usernameMsg" class="col-sm-2 control-label"></label>
  150.   </div>
  151.  
  152.   <div id="passwordDiv" class="form-group">
  153.     <label class="col-sm-2 control-label">密码</label>
  154.     <div class="col-sm-8">
  155.       <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
  156.     </div>
  157.     <label id="passwordMsg" class="col-sm-2 control-label"></label>
  158.   </div>
  159.   <div id="repasswordDiv" class="form-group">
  160.     <label class="col-sm-2 control-label">确认密码</label>
  161.     <div class="col-sm-8">
  162.       <input type="password" class="form-control" id="repassword" placeholder="请输入确认密码">
  163.     </div>
  164.     <label id="repasswordMsg" class="col-sm-2 control-label"></label>
  165.   </div>
  166.   <div class="form-group">
  167.     <label class="col-sm-2 control-label">email</label>
  168.     <div class="col-sm-8">
  169.       <input type="text" class="form-control" id="email" name="email" placeholder="请输入email">
  170.     </div>
  171.   </div>
  172.   <div class="form-group">
  173.     <label class="col-sm-2 control-label">姓名</label>
  174.     <div class="col-sm-8">
  175.       <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
  176.     </div>
  177.   </div>
  178.   <div class="form-group">
  179.     <label class="col-sm-2 control-label">性别</label>
  180.     <div class="col-sm-8">
  181.       <input type="radio" name="sex" value="man" checked="checked"/>男
  182.       <input type="radio" name="sex" value="woman"/>女
  183.     </div>
  184.   </div>
  185.   <div class="form-group">
  186.     <div class="col-sm-offset-2 col-sm-10">
  187.       <input type="submit" class="btn btn-danger btn-lg" value=" 注 册 "/>
  188.     </div>
  189.   </div>
  190. </form>
  191.       </div>
  192.      </div>
  193.      <!-- 网站底部 -->
  194.      <div class="row">
  195.       <div class="col-xs-12">
  196.       <img src="../img/footer.jpg" width="100%"/>
  197.       </div>
  198.      </div>
  199.      <div class="row">
  200.       <div class="col-xs-12 text-center">
  201.       <ul class="list-inline">
  202.       <li><a href="">联系我们</a></li>
  203.       <li><a href="">联系我们</a></li>
  204.       <li><a href="">联系我们</a></li>
  205.       <li><a href="">联系我们</a></li>
  206.       <li><a href="">联系我们</a></li>
  207.       <li><a href="">联系我们</a></li>
  208.       <li><a href="">联系我们</a></li>
  209.       <li><a href="">联系我们</a></li>
  210.       <li><a href="">联系我们</a></li>
  211.       <li><a href="">联系我们</a></li>
  212.       </ul>
  213.       </div>
  214.      </div>
  215.      <div class="row">
  216.       <div class="col-xs-12 text-center">
  217.       Copyright © 2005-2020 淘宝商城 版权所有
  218.       </div>
  219.      </div>
  220.    </div>
  221.   </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. git 沙河游戏节点图, 自由沙盒模拟git, 各类交互git命令

    git学习练习总资源链接: https://try.github.io/ (练习已通,有document) 本沙盒游戏教学:https://learngitbranching.js.org/?demo ...

  2. HTTP相关知识点

    一.工作原理       HTTP协议工作于客户端-服务器架构上.浏览器作为HTTP客户端通过URL向HTTP服务端(即web服务端)发送所有请求. Web服务器接收到请求后,向客户端发送相应的响应信 ...

  3. JS获取当前时间到30天之后的日期区间

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. C# 格式化一些知识点

    这是在看<C#本质论>偶然遇见的一个问题,看不懂,那后面的就没有法看了,于是百度搜索了“C#格式化”这一关键字,于是有了下面的内容.很多一下子记不住,又怕自己忘记,还是做一个笔记吧,方便自 ...

  5. 解析xml(当节点中有多个子节点)

    概要:解析一个xml,当一个节点中又包含多个子节点如何解析,对比一个节点中不包括其他节点的情况. 一,xml样例 <cisReports batNo="查询批次号" unit ...

  6. Linux运维学习笔记-软硬链接知识总结

    文件链接   硬链接,通过索引节点来进行链接 硬链接原理图 硬链接的创建: 直接执行命令“ln 源文件 硬链接文件”,即可完成创建硬链接. 硬链接知识小结: 1.具有相同Inode节点号的多个文件是互 ...

  7. Qt UI界面改了,但UI界面不更新

    /**************************************************************************** * Qt UI界面改了,但UI界面不更新 * ...

  8. 《DSP using MATLAB》第2章习题Problem2.1

    1.代码: %% ------------------------------------------------------------------------ %% Output Info abo ...

  9. Centos 6 下安装 erlang 手记

    基于openfire的IM项目已经成功上线,接下来的计划准备開始调研 ejabberd.  ejabberd  是基于erlang开发的.那么就先从搭建 erlang环境開始吧. 选择的操作系统为Ce ...

  10. Loararunner录制脚本

    LoadRunner录制 1.启动LoadRunner,用管理员方式打开,选择 “Create/Edit Scripts” 2.从这两个方式任意方式打开脚本页面 3.选择协议,这里我们举例子,用“We ...