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 ...
随机推荐
- 强大的XML
2018-04-23 20:29:26 XML:Extensible Markup Language,也就是可扩展标记语言.XML和HTML格式是古老的标记通用语言SGML的衍生语言. XML文件是可 ...
- 递归--练习8--noi1788Pell数列
递归--练习8--noi1788Pell数列 一.心得 5 1. 6 //直接递归Time Limit Exceeded 7 //那就记忆化递归 8 2. 9 直接记忆化递归后还有问题 10 a[k] ...
- baseCss/resetCss(转)
原文链接:https://github.com/hangyangws/baseCss#basecss baseCss 意义 统一各个浏览器差异.统一团队开发起始标准.弥补浏览器的“缺点”.提供频繁使用 ...
- 【Demo】CSS3 动画文字
效果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ubuntu14.04安装Android Studio出现error while loading shared libraries: libz.so.1的解决方法
参考博客地址: http://blog.csdn.net/newairzhang/article/details/28656693 安装lib32z1就可以解决,如下: 首先,sudo apt-get ...
- New Concept English Two 4
听力口语是一起的,其中,受中国英语发音的影响,我们的听力识别度会很差,歪果仁发的地道英语,极有可能我们听不懂.这涉及到:自然拼读法的训练,还有纠音练习.当然,听简单的美剧的音频,然后练习是最好的. 新 ...
- keras_基本网络层结构(2)_卷积层
参考文献:http://keras-cn.readthedocs.io/en/latest/layers/convolutional_layer/ 卷积层 Conv1D层 keras.layers.c ...
- Win7系统Visual Studio 2013配置OpenCV3.1图文详解
Win7系统Visual Studio 2013配置OpenCV3.1图文详解 OpenCV3.1对硬件加速和移动开发的支持相对于老版本都有了较大改进,支持新的开发工具,更易于扩展,配置方式也比以前简 ...
- 关于 unable to load shared object 'C:\Program Files\R\R-3.0.3\library\stats\libs\i386\stats.dll'
其实这个问题很简单就是,在R目录下的:C:\Program Files\R\R-3.0.3\library\stats\libs\i386这个目录下,拷贝一份:这个目录下的文件:C:\Program ...