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 ...
随机推荐
- 树状数组 Binary Indexed Tree/Fenwick Tree
2018-03-25 17:29:29 树状数组是一个比较小众的数据结构,主要应用领域是快速的对mutable array进行区间求和. 对于一般的一维情况下的区间和问题,一般有以下两种解法: 1)D ...
- thinkphp5中的配置如何使用
thinkphp5中的配置如何使用 一.总结 一句话总结:先加载配置,然后读取配置即可 加载配置 读取配置 Config::load(APP_PATH.'fry_config.php');\\加载配置 ...
- 获取文本中所有的<img>标签的位置，获取所有img标签的src
public static int[] GetImagePos(string str) { str = str.Replace("$", " "); str = ...
- RoR unobtrusive scripting adapter--UJS（一些Javascript的语法糖）
Learn how the new Rails UJS library works and compares with the old version of jquery_ujs that it re ...
- xtrabackup备份之增量备份（二）
测试了差不多一周的xtrabackup,本篇主要聊一下xtrabackup的增量备份.我一开始不是很了解,为什么每周都需要做全备份,每天都需要做增量备份,现在想想这个和技术无关.但是有一个新问题,如果 ...
- idea上查看本文件svn修改的历史版本
如上图依次点击,得到下图,比较即可:
- intent 系统设置界面
开发Android软件时,常常需要打开系统设置或信息界面,来设置相关系统项或查看系统的相关信息,这时我们就可以使用以下语句来实现:(如打开“无线和网络设置”界面) Intent intent = ...
- Alpha阶段第1周Scrum立会报告+燃尽图 01
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...
- 活字格企业Web应用生成器荣获"2017年度优秀软件产品"
日前,中国软件行业协会权威发布"2017年度优秀软件产品"名单,活字格企业 Web 应用生成器凭借产品的独特优势,和近年来在企业Web应用方面的杰出贡献,位列其中,受到用户和行业专 ...
- HDU 2323
http://acm.hdu.edu.cn/showproblem.php?pid=2323 把六边形抽象成坐标进行dp,抽象出的坐标关系必须满足六边形之间的关系.很有趣的一道dp #include ...