bootStrap写简单页面附判断是否为空以及二次密码是否一致

最新推荐文章于 2023-08-29 13:06:26 发布
原创 最新推荐文章于 2023-08-29 13:06:26 发布 · 2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootStrap

本文详细介绍了如何使用Bootstrap框架创建一个美观且响应式的用户注册页面。页面包括网站头部、导航条、注册表单和底部区域，同时实现了表单验证功能。

源码： 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>

	<body>
		<div class="container">
			<!-- 网站头部 -->
			<div class="row">
				<div class="col-md-4"></div>
				<div class="col-md-4"></div>
				<div class="col-md-4">
					<ul class="list-inline" style="margin-top:10px ;">
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">登录</a>
						</li>
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">注册</a>
						</li>
						<li>
							<a class="btn btn-danger" href="javascript:void(0);">购物车</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 导航条 -->
			<!--bootstrap导航条-->
			<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">
      	<!-- 阅读器专用的样式 -->
        <span class="sr-only">这是汉堡按钮</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-expanded="false">更多 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#">我们的电话</a>
									</li>
									<li>
										<a href="#">我们的宗旨</a>
									</li>
									<li>
										<a href="#">我们的环境</a>
									</li>
									<!-- 分割线 -->
									<li class="divider"></li>
									<li>
										<a href="#">我们的地址</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">您的建议</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="请输入信息">
							</div>
							<button type="submit" class="btn btn-default">查询</button>
						</form>
					</div>
				</div>
			</nav>
			<!-- 注册页面主体 -->
			<div class="row" style="background-image: url(img/bpic13706.jpg);">
				<div class="col-sm-8 col-sm-offset-2" style="border: 5px solid gainsboro;background-color: white;">
					<!-- 表单部分 -->
					<div class="row">
						<div class="col-sm8 col-sm-offset-2">
							<font color="#204D74" size="4">会员注册</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-8">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
							</div>
							<label class="col-sm-2 control-label" id="usernameMsg"></label>
						</div>
						<div class="form-group" id="passwordDiv">
							<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 class="col-sm-2 control-label" id="passwordMsg"></label>
						</div>
						<div class="form-group" id="repasswordDiv">
							<label class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="repassword" placeholder="请输入确认密码">
							</div>
							<label class="col-sm-2 control-label" id="repasswordMsg"></label>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-8">
								<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-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" style="margin-top: 6px;">
								<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">
								<!--btn-lg变大一点-->
								<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="" width="100%"/>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 text-center">
					<ul class="list-inline">
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
						<li><a href="javascript:void(0);">联系我们</a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 text-center">
					©1995-2004 咪咪咪咪  版权所有
				</div>
			</div>
		</div>
	</body>
	<script>
		//密码和确认密码一致性效验
		function checkPwdAndRepwd(f1,f2){
			//密码
			//前提密码和确认密码必须填写
			if(f1&&f2){
				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){
					msg.innerHTML = "" ;
					div.className +=" form-group" ;
					return true ;
				}else{
					div.className = " has-error" ;
					msg.innerHTML = "必须和密码一致" ;
					return false ;
				}
			}else{
				return false ;
			}
		}
		function checkNotNull(nid){
			//1.获取用户名菜单输入项 元素对象
			var nodex = document.getElementById(nid) ;
			//2.获取对应的错误信息回显 label对象
			var msg = document.getElementById(nid+"Msg") ;
			//3.获取对应的div
			var div = document.getElementById(nid+"Div") ;
			var reg = /^\s*$/ ;//如果0~多个空白符，就为true
			if (reg.test(nodex.value)) {
				//用户名信息不合格
				msg.innerHTML = "不能为空" ;
				//如果错误及获取id更改class样式
				div.className +=" has-error" ;
				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>
</html>

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				 <div class="col-xs-12 col-md-12" style="background-color: #EAEAEA;">
				 	<font size="5">启动流程</font>
				 </div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-md-12">
					<div style="height: 10px;"></div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12" style="background-color: #EAEAEA;">
					<ul class="list-inline" style="margin-top: 6px;">
						<li>
							<a class="btn btn-default" href="javascript:void(0);">
								<span class="glyphicon glyphicon-remove"></span>关闭
							</a>
						</li>
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">
								<span class="glyphicon glyphicon-send"></span>启动
							</a>
						</li>
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">
								<span class="glyphicon glyphicon-floppy-disk"></span>保存草稿
							</a>
						</li>
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">
								<span class="glyphicon glyphicon-picture"></span>流程图
							</a>
						</li>
						<li>
							<a class="btn btn-primary" href="javascript:void(0);">
								<span class="glyphicon glyphicon-print"></span>打印
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<form class="form-horizontal" οnsubmit="return checkForm()">
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">档案号</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入档案号">
							</div>
							<label class="col-sm-2 control-label">电子档案</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入电子档案">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">数据入库版本号</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入数据入库版本号">
							</div>
							<label class="col-sm-2 control-label">业务编号</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入业务编号">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">项目(批次)名称</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入项目(批次)名称">
							</div>
							<label class="col-sm-2 control-label">土地坐落</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入土地坐落">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">区县代码</label>
							<div class="col-sm-3">
								<!--<input type="text" class="form-control" id="username" name="username" placeholder="请输入区县代码">-->
								<select class="form-control">
									<option>请选择</option>
									<option>惠城区</option>
									<option>仲恺</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
							</div>
							<label class="col-sm-2 control-label">批准文号</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入批准文号">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">报批年度</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入报批年度">
							</div>
							<label class="col-sm-2 control-label">批文日期</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入批文日期">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">占用指标情况</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入占用指标情况">
							</div>
							<label class="col-sm-2 control-label">申请用地单位</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入申请用地单位">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">新增建设用地</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入新增建设用地">
							</div>
							<label class="col-sm-2 control-label">农用地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入农用地面积">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">耕地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入耕地面积">
							</div>
							<label class="col-sm-2 control-label">基本农田面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入基本农田面积">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">林地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入林地面积">
							</div>
							<label class="col-sm-2 control-label">园地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入园地面积">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">其他农用地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入其他农用地面积">
							</div>
							<label class="col-sm-2 control-label">建设用地面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入建设用地面积">
							</div>
						</div>
						<div class="form-group" id="usernameDiv" style="margin-top: 20px;">
							<label class="col-sm-2 control-label">用地总面积</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="username" name="username" placeholder="请输入用地总面积">
							</div>
							<label class="col-sm-2 control-label">问题日志</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="text" name="text" placeholder="请输入问题日志">
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="row" style="background-color: #EAEAEA; height: 50px;">
			  <div class="col-md-10" style="margin-top: 12px;">
			  	<font size="3">用地报批地块信息</font>
			  </div>
			  <div class="col-md-2" style="margin-top: 8px;">
			  	<button class="btn btn-default" type="submit">
					<span class="glyphicon glyphicon-plus"></span>添加
					</button>
					<button class="btn btn-danger" type="submit">
					<span class="glyphicon glyphicon-remove"></span>删除
					</button>
			  </div>
			</div>
			<div class="row" style="background-color:#CCCCCC; height: 50px;">
				<div class="col-md-1"style="margin-top: 13px;">
				<input type="checkbox" />
				</div>
				<div class="col-md-5" style="margin-top: 13px;">
					<font size="3">地块编号</font>
				</div>
				<div class="col-md-4" style="margin-top: 13px;">
					<font size="3">类型</font>
				</div>
				<div class="col-md-2" style="margin-top: 13px;">
					<font size="3">管理</font>
				</div>
			</div>
		</div>
	</body>
</html>

 

简单的修改密码
weixin_44547598的博客
05-26 1122
下面是修改密码的页面 ， 这里用的是bootstrap4的框架来搭建 这里呢点击button按钮（浏览） ， 弹出模态框显示所有的会员卡号 ，这里的会员卡号是与会员卡表内的数据相连接的 ，就是会员卡表内的数据有多少条 ，在模态框内就显示多少条 ，如果在会员卡表内删除一条数据，那么模态框内就要少显示一条数据 ，下面是点击浏览后调用的方法 ， 首先清空掉模态框内的所有数据 ，并将模态框显示出...
jQuery+Ajax+Bootstrap学习干货（二）
Cs_hnu_scw的博客
08-03 1740
这里对jQuery中的一些实际运用的例子再进行讲解一下，然后再简单的说一下关于Ajax这个方面的应用，还有一个前端框架Bootstrap的使用！！！都比较基础，想了解的可以进行更深入的学习哦！！ jQuery的实例运用 （1）jQuery实现下拉列表选项 下拉列表左右选择 $(function(){ /*1.选中单击去右边*/ $("#selectOneTo
实现注册动态判断两次密码是否输入一致（jquery+bootstrap）
热门推荐
PowerfulQ的博客
08-21 1万+
需要引入： &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt; &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/script
bootstrap 前台判断状态
优快云 记录 “ 美好生活 ”
08-24 770
{field:'hot',title:'热销',width:100,formatter:function(value){ return value == 1 ? '是':'否'; }},
Html的bootstrap用validator可以验证两次输入的密码是否一致
monica1_1的博客
02-19 4177
password1: { validators: { identical: { field: 'password2', message: '两次输入的密码不相符' } } }, password2: { validators: { identical: { ...
用Boostrap与JS动态检查你戳过的栏位是否为空
摸鱼呀摸鱼
11-15 863
（就是一个很简单的示范，Boostrap需要引入的东西自己搞哈）首先先准备原料： <body> <asp:TextBox class="form-control" id="mytext" runat="server"> </asp:TextBox> <div class="invalid-feedback">网址不可为空</div> <asp:Button cl
bootstrap中的一些选择框的状态判断
喵咪不爱吃鱼的博客
09-27 4033
<select class="form-control"> <option <% if(entRet.lstContent.lstSptPlan[i].allFlg == 1){ %>selected<%}%> >内测用户可见</option> <option <% if(entRet.lstContent.lstSptPlan[i].allFlg == 2){ %>selected
大连首闻grid二次开发增强文档
blurooo的博客
09-30 2423
1. 说明：本插件基于大连首闻grid所做的二次开发，增强了ajax与服务器交互的功能，扩展了增删改查，支持restful风格
[Node.js] 基于NodeJS+Express+mongoDB+Bootstrap的博客系统实战
DeathDomain的博客
07-16 2160
MyBlog实战 项目要求 a. 前台和后台的页面布局 前台要求有首页、列表页、详情页面、登录、注册 后台要求有登录页面、列表、添加修改页面 页面要求简洁、美观、大方 b. 后台功能要求 前台注册用户在后台的分页展示 后台可以对分类进行管理 后台可以对文章进行管理 后台可以针对文章的评论进行展示 后台需要登录才能进入后台管理系统 c. 前台功能要求 首页按照分类展示对应的最新几条文章 列表页可以根据不同的分类进行文章列表的切换 详情页在登录的前提下，可以对文章进行评论(未实现,jQuery
基于Bootstrap的响应式jQuery表单验证插件
虽然当前仅列出目录名称，但可以推测该项目遵循标准的开源项目组织结构，便于开发者学习、调试和二次开发。其中，min.js 文件代表经过压缩混淆后的生产版本，体积更小，适合部署上线；而原始未压缩版本则更适合用于...
bootstrap表单验证
04-02
bootstrap表单验证
bootstrapTable根据条件判断多选是否可用及设置默认选中
弯弯^.^的博客
10-15 1189
问题描述： 当前需要表格下有的列数据不可选 解决方案： 在父元素中先使用absolute定位，再对子元素使用relative定位 <div class="err-msg"> <span id='err'></span> </div> .err-msg{ position: absolute; } .err-msg > span { position: relative; bottom: 62px; left: 66px;
bootstrapvalidator 密码验证 以及清除验证
小鑫lay的博客
07-22 8139
   在项目中写了一个修改密码的功能，使用了bootstrapvalidator 来进行文本框的验证。 首先在修改密码的jsp页面上加载validator的css和js   路径存放可以自己选择合适的位置。  &lt;link rel="stylesheet" href="./static/validator/css/bootstrapValidator.css" /&gt; &lt;s...
bootstrap插件bootstrapValidator常用验证规则及常用方法总结
丨小毛子的博客
09-03 1806
bootstrap插件bootstrapValidator常用验证规则总结 1.判断字段是否为空 notEmpty: { message: ‘用户名必填不能为空’ } 2.字段长度判断 stringLength: { min: 6, max: 30, message: ‘用户名长度不能小于6位或超过30位’ } 3.通过正则表达式进行验证 regexp: { regexp: /1+$/i, message: ‘名字只能由字母字符和空格组成。’ } 4.大小写验证 stringCase: { message:
Bootstrap中的表单信息验证
2202_76088586的博客
08-29 2109
账号为6-16位字符
bootstrapValidator 动态添加html元素的验证
阿彬的专栏
08-03 3312
1，动态添加的元素如果想要验证需要用到addField，为相应增加的元素name添加验证 function addValShow() { $("#formAppointment").bootstrapValidator("addField", "department", { validators: { notEmpty: { ...
bootstrap表格的行数据选择判断复选框问题
wqr111的博客
12-22 763
columns : [{ checkbox:true, formatter:function(value,row,index){ if (row.属性==条件){ return { checked : true,//设置选中 disabled ：true//真为不可选} }else{ return {disabled ：falase//假可选} } } }] ...
Bootstrap表单校验（判断输入框中的值是否存在）
qq_37924509的博客
03-31 2240
<form class="form-horizontal" id="sysUserInfo"> <!--隐藏区域--> <input type="hidden" id="id_id" value="${mtUser.id!}"&g...
Bootstrap使用alert弹出窗（含js）
TinpeaV的博客
07-21 6610
在系统开发的时候想搞一个登录成功或失败的弹出窗，原生js的alert又显得太俗了。刚好使用的前端框架是Bootstrap，可是Bootstrap里面的alert模块只提供了css样式，并没有js。所有终于让我找到了完整可以使用的bootstrap的alert。......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值