用bootstrap做一个注册页面练习

最新推荐文章于 2023-12-20 13:36:20 发布
最新推荐文章于 2023-12-20 13:36:20 发布
阅读量5.1k 收藏 8
点赞数 1
分类专栏： # JavaWeb学习笔记 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49128301/article/details/120940382
版权

黑马程序员注册页练习：

  1. 页面顶部的三部分在pc屏幕上显示为一行，在移动设备屏幕上显示为一部分一行；
  2. 导航条在大屏幕展示全部内容，在移动设备上需要将内容能够折叠/展开；
  3. 用户名/密码/确认密码不能为空，密码需要和确认密码一致，如果不符合，阻止注册操作，并将错误信息展示给用户看。
	<!doctype html>
<html lang="zh-CN">   <!-- HTML页面使用的是中文简体 -->
  <head>
    <meta charset="utf-8">   <!-- 设置HTML页面的字符集 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- 使用IE最新的渲染模式，展示页面-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<script src="../js/jquery-ui.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<style type="text/css">
			#heima {
				width: 80%;
			}
		</style>
	<script src="../js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	<script type="text/javascript">
	// 表单校验方法
		function checkForm() {
			// 用户名不能为空
			// 1.获取用户名表单输入项
			var nodex=document.getElementById("username");
			// 获取对应的错误信息  回显label元素
			var mag=document.getElementById("usernameMsg");
			// 获取对应的Div
			var div=document.getElementById("usernameDiv");
			// 2. 对用户名进行非空判断  
			var reg=/^\s*$/;// 如果是0~多个空格就返回true，否则返回false
			if (reg.text(nodex.value)){
				// 用户输入性息有问题正则判断后返回true，但是此时应该返回false
					div.className+="has-error";
					mag.innerHTML="不能为空";
					return false;
					
				}else{
					// 用户信息合格
					return true; 
				}
		    }
	</script>
  </head>
  <body>
	  <!-- 第一行，放logo-->
   <div class="container">
	   <div class="row">
	    <div class="col-md-4">
			<img src="../img/腾讯logo.png" style="width: 120px;height: 40px;margin-top: 10px; " alt="">
		</div>
		<div class="col-md-4">
			<img src="../img/正品.png" style="width: 300px;height: 50px;margin-bottom: 10px;" alt="">
		</div >
		<div class="col-md-4">	
				<ul style="margin-top: 10px;" class="list-inline">
					<li><a class="btn btn-primary" href="">登陆</a></li>
					<li><a class="btn btn-primary" href="">注册</a></li>
					<li><a class="btn btn-danger" href="">购物车</a></li>
				</ul>
		</div >
	   </div>
   </div>
   <!-- 第二行，放导航条-->
   <div class="container">
   	   <div class="row">
			<nav class="navbar  navbar-inverse" >
			  <div class="container-fluid">
			    <!-- Brand and toggle get grouped for better mobile display -->
			    <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>
			          </ul>
			        </li>
			      </ul>
			      <form class="navbar-form navbar-right">
			        <div class="form-group">
			          <input type="text" class="form-control" placeholder="Search">
			        </div>
			        <button type="submit" class="btn btn-default">Submit</button>
			      </form>
			    </div><!-- /.navbar-collapse -->
			  </div><!-- /.container-fluid -->
			</nav>
   	   </div>
   </div>
   <!-- 第三行，放一个表单
   标题  用户注册
   用户名（请输入用户名）
   密码（请输入密码）
   确认密码 (请输入确认密码)
   Email (请输入Email)
   姓名(请输入姓名)
   性别 男 女 
     注册
   -->
   <div class="container">
   	   <div class="row" style="background-image: url(../img/宇宙飞船.jpg);">
		   <!-- 使用；列偏移   .col-屏幕尺寸-offset-*    -->
		   <div class="col-xs-8 col-xs-offset-2" style="border: #DDDDDD solid;">
				<div class="row" >
					<div class="col-xs-8 col-xs-offset-2">
						<font color="#337AB7">用户注册</font>
					</div>		
				</div >
				<form class="form-horizontal" onsubmit="return checkForm()" >
					  <div class="form-group " id="usernameDiv" >
						<label  class="col-sm-2 control-label" >用户名</label>
						<div class="col-sm-6">
						  <input type="text" class="form-control" id="username" name="username"  placeholder="请输入用户名">
						</div>
						  <label  id="usernameMsg" class="col-sm-2 control-label" ></label>
					  </div>
					  <div class="form-group">
						<label  class="col-sm-2 control-label">密码</label>
						<div class="col-sm-6">
						  <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
						</div>
					  </div>
					  <div class="form-group">
						<label  class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-6">
						  <input type="password" class="form-control" id="rePassword" placeholder="请输入确认密码">
						</div>
					  </div>
					  <div class="form-group">
						<label  class="col-sm-2 control-label">Email</label>
						<div class="col-sm-6">
						  <input type="email" 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-6">
						  <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-6"> 
							   <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-6">
						  <div class="checkbox">
							<label>
							  <input type="checkbox"> 记住密码
							</label>
						  </div>
						</div>
					  </div>
					  <div class="form-group">
						<div class="col-sm-offset-2 col-sm-6">
						 <input type="submit" class="btn btn-danger btn-lg" value=" 注 册 ">
						</div>
					  </div>
				</form>
		   </div>
   	   </div>
   </div>
   <!-- 第四行，放服务中心
   正品保障 急速物流  无忧售后  特色服务  帮助中心
   -->
   <br>
   <div class="container">
   	   <div class="row">
   			<div class="col-xs-12">
   				<img src="../img/售后.png" style="width: 100%;">
   			</div>
   	   </div>
   </div>

   <!-- 第五行，放关于我们
   关于我们  联系我们  招贤纳士  法律声明  友情链接  支付方式  配送方式  服务声明  广告声明
   共9个
   -->
   <div class="container">
   	   <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>
				</ul>
			</div>
   	   </div>
   </div>
   <!-- 第六行，放版权   居中显示
   Copyright@2005-2020黑马商城版权所有
   -->
   <div class="container">
   	   <div class="row" >
   			<div class="col-xs-12 text-center"  >
   				Copyright@2005-2020黑马商城版权所有
   			</div>
   	   </div>
   </div>
  </body>
</html>

用onsubmit来校验表单

提交表单之后没有触发onsubmit？？

日拱一卒无有尽， 功不唐捐终入海
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap注册页面
qq_36943809的博客
12-17 975
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" h...
【一、bootstrap框架前端注册登录页面】
weixin_51988564的博客
03-28 4001
基于eclipse平台，java语言开发，前端用到bootstrap框架，后端使用jsp技术和servlet技术，数据库使用mysql，服务器端使用tomcat,设计并开发一个电子相册系统。
用前端框架Bootstrap和Django实现用户注册页面
昊虹AI笔记
10-31 2603
用前端框架Bootstrap和Django实现用户注册页面
bootstrap实现注册和注册的验证
_陈泡泡的博客
11-27 2371
bootstrap实现注册和注册的验证 首先你需要学习bootstrap中与表单有关的知识，其次需要了解JS组件系列——Form表单验证神器 BootstrapValidator bootstrap中文官网 bootstrapvalidator源码 话不多说，直接上代码 html+css部分 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;l
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2702
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
BootStrap实现商城注册页面前端效果------商城项目前端
春风若有怜花意，可否许我再少年
12-12 1254
BootStrap实现商城注册页面前端效果------商城项目前端
bootstrap做登录注册页面带验证
12-15
用bootstrap做的登录，注册页面，使用validate进行表单验证，是本人从空白页面搭建的，亲测可用，1积分算是我的辛苦费吧。 我会通过博客注明知识点：http://blog.csdn.net/qq_19558705； 希望能帮到大家。没有积分的...
PHP实现登录注册之BootStrap表单功能
01-20
前面几篇简单介绍了一下前端与PHP的一些知识点，前端中表单提交是一个非常重要的模块，在本篇中我会介绍一些关于表单的知识，如果前面内容你掌握的不好并且没有大量的练习，我感觉你最好先把标签都记下来。...
WebTrader:使用Flask Web框架，Jinja模板引擎，Bootstrap前端框架，Markit Data API和SQLite后端构建的一个简单的交易Web应用程序，用于练习买卖股票以及其他交易操作以及真实市场数据。
04-27
网络交易者使用Flask Web框架，Jinja模板引擎，Bootstrap前端框架和Markit Data API构建的一个简单的交易Web应用程序，用于练习买卖股票以及其他交易操作，并带有真实的市场数据。 将我的命令行交易应用程序...
E-Shop:E-Shop是一个网站，旨在展示HTML，CSS，Javascript和Bootstrap（Bootstrap 4）的技能。 它托管在Firebase上
05-11
E-Shop是一个网站，旨在展示HTML，CSS，Javascript和Bootstrap（Bootstrap 4）的技能。 它托管在Firebase上。 用于存储数据的方法不是标准且安全的方式，但是由于该项目是为练习HTML，CSS，Javascript和Bootstrap而...
bootstrap登录注册页面模板.zip
07-28
炫酷的登录注册模板
使用BootStrap实现用户登录界面UI
09-01
本文给大家介绍使用BootStrap实现用户登录界面UI，布局风格采用左右各一半的风格设计，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
bootstrap实现登录页面
07-04
实现静态的登录页面，借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
bootstrap简易登录注册页面
03-30
资源共享bootstrap简易登录注册页面
kunpeng_note:这是一个新手练习项目，备忘录网站。后端node.js+mysql开发，前端vue+bootstrap
05-09
这是一个node的新手练手项目，前端运用bootstrap、jquery和vue，后端node搭建。 入口 node app.js 本地环境搭建 依赖安装 npm install --save 数据库搭建 mysql -h localhost/ip -u root -p mysql>source kunpeng_...
用vue和bootstrap实现用户登录页面
2201_75321887的博客
04-12 899
用vue和bootstrap实现用户登录页面
基于boostrap的登录注册界面制作（html+css）
热门推荐
weixin_42592879的博客
08-05 2万+
这里写自定义目录标题基于boostrap的登录界面制作1. 安装bootstrap以及fontawesome环境2. 表单设计3. CSS样式 基于boostrap的登录界面制作 1. 安装bootstrap以及fontawesome环境 有几种方法可以安装环境，我这里使用了百度的静态资源库的cdn安装环境 <!--用百度的静态资源库的cdn安装bootstrap环境--> <!-- Bootstrap 核心CSS文件 --> <link href="
采用bootstrap框架实现登录页面
最新发布
qq_34884166的博客
12-20 1595
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
使用Bootstrap制作一个注册页面
05-31
好的，下面是一个使用 Bootstrap 制作的简单注册页面示例代码： ```html <!DOCTYPE html> <title>Registration Page , initial-scale=1"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值