7_bootstap之综合案例
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之综合案例的更多相关文章
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
- JavaEE Tutorials (30) - Duke综合案例研究示例
30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...
- jquery-easyUI第二篇【综合案例】
基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...
- CSS3_综合案例
综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- Winform开发框架中的综合案例Demo
在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...
- 【原创 Hadoop&Spark 动手实践 13】Spark综合案例：简易电影推荐系统
[原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统
- Ext.js入门：常用组件与综合案例（七）
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
随机推荐
- 浅谈Android Studio3.0更新之路（遇坑必入）
>可以参考官网设置-> 1 2 >> Fantasy_Lin_网友评论原文地址是:简书24K纯帅豆写的我也更新一下出处[删除]Fa 转自脚本之家 浅谈Android Studi ...
- 使用Zend studio+WAMP来调试Wordpress后台的PHP程序的一些非常关键的信息（原创）
一.Zend studio代码格式化快捷键:选中代码,Ctrl+Shift+F( 注意,在英文输入发状态下使用!) .Zend studio实用快捷键 :http://www.zendstudio.n ...
- 拖拉记录上下移动--Ajax UI
所谓的 Ajax 拖拉 UI,就是直接用鼠标进行拖拉排序,这种方式对用户来说操作速度更快. 拖拉的 UI 需要额外的前端套件,这里介绍 jQuery UI 的 Sortable Plugin,并直接使 ...
- 017PHP基础知识——流程控制语句(五)
<?php /** * break;退出循环: * 语法结构:break int;可以指定跳过几级循环: * while do_while for foreach switch */ /*$i= ...
- oracle分区交换技术
交换分区的操作步骤如下: 1. 创建分区表t1,假设有2个分区,P1,P2.2. 创建基表t11存放P1规则的数据.3. 创建基表t12 存放P2规则的数据.4. 用基表t11和分区表T1的P1分区交 ...
- Window 7 平台的IE11浏览器预览版发布
继之前Windows 8.1 带来了IE11浏览器之后,今天Window 7 以及Windows Server 2008 R2平台的IE11浏览器预览版也已经发布. 当然这还只是一个开发者预览版,可能 ...
- Vue2.0 less全局配置
前言 再一次vue2.0的开发中,遇到这样的一个问题,使用less与处理器,封装了一套关于项目的主题,但是使用的时候,main.js中引入后依然不能直接使用定义的@theme-bg等less定义的颜色 ...
- HDU 4764：Stone（巴什博弈）
Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- JS 实战2（邮箱选人功能）
点击选人打开新的窗口,新窗口中选取之后点击确定将所选内容传给原窗口,并关闭当前窗口 <%@ Page Language="C#" AutoEventWireup=" ...
- 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素
.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!