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 ...
随机推荐
- kissy初体验-waterfall
目录: 1. 功能介绍 2. waterfall样例展示 3. 使用说明 4. 遇到过的问题 5. 总结 1. 功能介绍 现在越来越多的网站开始瀑布流方式布局,瀑布流式布局(百度百科:瀑布流),是比较 ...
- sqlserver版本分类下载以及各个版本之间的区别是什么
很多用visual studio做开发的朋友经常会用到sqlserver数据库,但是往往在选择的时候就不知道该使用哪个版本了,今天亦是美网络就给大家分享一下sqlserver各个版本之间的区别,以及各 ...
- Total Defense Anti-Virus – 免费6个月
Total Defense Anti-Virus 具有病毒和间谍软件保护,免费的专家远程安装和设置,快速扫描引擎不会拖慢电脑速度,基于云保护.高级Rootkit保护,自动扫描驱动器和内存等等.官方网站 ...
- win7下解压安装mysql的方法
在win7下通过解压安装mysql 5.7一直出现启动不成功,网上找了好久终于找到一个解决方法,记录一下: 1.解压下载的压缩包 2.在解压目录下,将my-default.ini改名为my.ini, ...
- timer Compliant Controller project （3）--bom and sch
After optimization of structural solution , I must prepare the bom and drawing circuit diagram as ...
- OMAP4之DSP核（Tesla）软件开发学习（四）ARM核与DSP核通讯示例
首先,安卓系统完全启动4AJ.2.1. 其次,查看OMAP4的Tesla相关信息,检查Tesla是否使能.(有如下显示,则OK) cat /d/emoteproc/omap-rproc.0/versi ...
- 使用c++实现一个FTP客户端(二)
接上篇http://www.cnblogs.com/jzincnblogs/p/5213978.html,这篇主要记录编程方面的重点. 客户端使用了Windows Socket提供的API,支持上传. ...
- flv格式的播放代码
<object classid="clsid:D27CDB6E-AE6D-444553540000" class="player2" codebase=& ...
- window XP下 php5.5+mysql+apache2+phpmyadmin安装
学了将近大半年的php了,还没有装过独立的php环境,一直用的集成的.记得刚学时,一头雾水,不知改怎么搭配环境,就觉得特别复杂,各种看不懂,今天还是自己在XP环境下搭配了一个. 首先,下载php5.5 ...
- 9 CSS in JS Libraries You Should Know in 2018
转自:https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b 实际上 wix 的 styl ...