bootstrap做登入注册页面，使用validate做表单验证

技术：bootstrap，font-awesome，jquery-validate；

特点：响应式布局，表单验证（用户两次密码是否相同，必填信息是否填写）背景图片自适应屏幕大小；

宗旨：从实战中学知识。

个人主页：http://www.itit123.cn/ 更多干货等你来拿 （微信小程序入门教程：入门教程系列 ，提供免费的api接口，无需考虑服务端代码问题）。

验证码实现功能 ITDragon博客

效果图：

html代码：

第三方资源的导入是用cdn引入；当然也可以自己去下载在本地导入。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>bootstrap案例</title>
  6. <!--用百度的静态资源库的cdn安装bootstrap环境-->
  7. <!-- Bootstrap 核心 CSS 文件 -->
  8. <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  9. <!--font-awesome 核心我CSS 文件-->
  10. <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  11. <!-- 在bootstrap.min.js 之前引入 -->
  12. <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  13. <!-- Bootstrap 核心 JavaScript 文件 -->
  14. <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  15. <!--jquery.validate-->
  16. <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
  17. <script type="text/javascript" src="js/message.js" ></script>
  18. <style type="text/css">
  19. body{background: url(img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}
  20. .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
  21. #login_form{display: block;}
  22. #register_form{display: none;}
  23. .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
  24. input[type="text"],input[type="password"]{padding-left:26px;}
  25. .checkbox{padding-left:21px;}
  26. </style>
  27. </head>
  28. <body>
  29. <!--
  30. 基础知识：
  31. 网格系统:通过行和列布局
  32. 行必须放在container内
  33. 手机用col-xs-*
  34. 平板用col-sm-*
  35. 笔记本或普通台式电脑用col-md-*
  36. 大型设备台式电脑用col-lg-*
  37. 为了兼容多个设备，可以用多个col-*-*来控制；
  38. -->
  39. <div class="container">
  40. <div class="form row">
  41. <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
  42. <h3 class="form-title">Login to your account</h3>
  43. <div class="col-sm-9 col-md-9">
  44. <div class="form-group">
  45. <i class="fa fa-user fa-lg"></i>
  46. <input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>
  47. </div>
  48. <div class="form-group">
  49. <i class="fa fa-lock fa-lg"></i>
  50. <input class="form-control required" type="password" placeholder="Password" name="password" maxlength="8"/>
  51. </div>
  52. <div class="form-group">
  53. <label class="checkbox">
  54. <input type="checkbox" name="remember" value="1"/> Remember me
  55. </label>
  56. <hr />
  57. <a href="javascript:;" id="register_btn" class="">Create an account</a>
  58. </div>
  59. <div class="form-group">
  60. <input type="submit" class="btn btn-success pull-right" value="Login "/>
  61. </div>
  62. </div>
  63. </form>
  64. </div>
  65. <div class="form row">
  66. <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
  67. <h3 class="form-title">Login to your account</h3>
  68. <div class="col-sm-9 col-md-9">
  69. <div class="form-group">
  70. <i class="fa fa-user fa-lg"></i>
  71. <input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus"/>
  72. </div>
  73. <div class="form-group">
  74. <i class="fa fa-lock fa-lg"></i>
  75. <input class="form-control required" type="password" placeholder="Password" id="register_password" name="password"/>
  76. </div>
  77. <div class="form-group">
  78. <i class="fa fa-check fa-lg"></i>
  79. <input class="form-control required" type="password" placeholder="Re-type Your Password" name="rpassword"/>
  80. </div>
  81. <div class="form-group">
  82. <i class="fa fa-envelope fa-lg"></i>
  83. <input class="form-control eamil" type="text" placeholder="Email" name="email"/>
  84. </div>
  85. <div class="form-group">
  86. <input type="submit" class="btn btn-success pull-right" value="Sign Up "/>
  87. <input type="submit" class="btn btn-info pull-left" id="back_btn" value="Back"/>
  88. </div>
  89. </div>
  90. </form>
  91. </div>
  92. </div>
  93. <script type="text/javascript" src="js/main.js" ></script>
  94. </body>
  95. </html>
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>bootstrap案例</title>

		<!--用百度的静态资源库的cdn安装bootstrap环境-->

		<!-- Bootstrap 核心 CSS 文件 -->

		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

		<!--font-awesome 核心我CSS 文件-->

		<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

		<!-- 在bootstrap.min.js 之前引入 -->

		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

		<!-- Bootstrap 核心 JavaScript 文件 -->

		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

		<!--jquery.validate-->

		<script type="text/javascript" src="js/jquery.validate.min.js" ></script>

		<script type="text/javascript" src="js/message.js" ></script>

		<style type="text/css">

			body{background: url(img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}

			.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}

			#login_form{display: block;}

			#register_form{display: none;}

			.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}

			input[type="text"],input[type="password"]{padding-left:26px;}

			.checkbox{padding-left:21px;}

		</style>

	</head>

	<body>

		<!--

			基础知识：

			网格系统:通过行和列布局

			行必须放在container内

			手机用col-xs-*

			平板用col-sm-*

			笔记本或普通台式电脑用col-md-*

			大型设备台式电脑用col-lg-*

			为了兼容多个设备，可以用多个col-*-*来控制；

		-->

	<div class="container">

		<div class="form row">

			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">

				<h3 class="form-title">Login to your account</h3>

				<div class="col-sm-9 col-md-9">

					<div class="form-group">

						<i class="fa fa-user fa-lg"></i>

						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>

					</div>

					<div class="form-group">

							<i class="fa fa-lock fa-lg"></i>

							<input class="form-control required" type="password" placeholder="Password" name="password" maxlength="8"/>

					</div>

					<div class="form-group">

						<label class="checkbox">

							<input type="checkbox" name="remember" value="1"/> Remember me

						</label>

						<hr />

						<a href="javascript:;" id="register_btn" class="">Create an account</a>

					</div>

					<div class="form-group">

						<input type="submit" class="btn btn-success pull-right" value="Login "/>

					</div>

				</div>

			</form>

		</div>

		<div class="form row">

			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">

				<h3 class="form-title">Login to your account</h3>

				<div class="col-sm-9 col-md-9">

					<div class="form-group">

						<i class="fa fa-user fa-lg"></i>

						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus"/>

					</div>

					<div class="form-group">

							<i class="fa fa-lock fa-lg"></i>

							<input class="form-control required" type="password" placeholder="Password" id="register_password" name="password"/>

					</div>

					<div class="form-group">

							<i class="fa fa-check fa-lg"></i>

							<input class="form-control required" type="password" placeholder="Re-type Your Password" name="rpassword"/>

					</div>

					<div class="form-group">

							<i class="fa fa-envelope fa-lg"></i>

							<input class="form-control eamil" type="text" placeholder="Email" name="email"/>

					</div>

					<div class="form-group">

						<input type="submit" class="btn btn-success pull-right" value="Sign Up "/>

						<input type="submit" class="btn btn-info pull-left" id="back_btn" value="Back"/>

					</div>

				</div>

			</form>

		</div>

		</div>

	<script type="text/javascript" src="js/main.js" ></script>

	</body>

</html>

js代码：

可能有不合理的方法，毕竟笔者能力有限，如有更好的方法可以留言，我会及时修改。

    1. $().ready(function() {
    2. $("#login_form").validate({
    3. rules: {
    4. username: "required",
    5. password: {
    6. required: true,
    7. minlength: 5
    8. },
    9. },
    10. messages: {
    11. username: "请输入姓名",
    12. password: {
    13. required: "请输入密码",
    14. minlength: jQuery.format("密码不能小于{0}个字 符")
    15. },
    16. }
    17. });
    18. $("#register_form").validate({
    19. rules: {
    20. username: "required",
    21. password: {
    22. required: true,
    23. minlength: 5
    24. },
    25. rpassword: {
    26. equalTo: "#register_password"
    27. },
    28. email: {
    29. required: true,
    30. email: true
    31. }
    32. },
    33. messages: {
    34. username: "请输入姓名",
    35. password: {
    36. required: "请输入密码",
    37. minlength: jQuery.format("密码不能小于{0}个字 符")
    38. },
      1. rpassword: {
      2. equalTo: "两次密码不一样"
      3. },
      4. email: {
      5. required: "请输入邮箱",
      6. email: "请输入有效邮箱"
      7. }
      8. }
      9. });
      10. });
      11. $(function() {
      12. $("#register_btn").click(function() {
      13. $("#register_form").css("display", "block");
      14. $("#login_form").css("display", "none");
      15. });
      16. $("#back_btn").click(function() {
      17. $("#register_form").css("display", "none");
      18. $("#login_form").css("display", "block");
      19. });
      20. });
      21. $().ready(function() {
        
	$("#login_form").validate({
        
		rules: {
        
			username: "required",
        
			password: {
        
				required: true,
        
				minlength: 5
        
			},
        
		},
        
		messages: {
        
			username: "请输入姓名",
        
			password: {
        
				required: "请输入密码",
        
				minlength: jQuery.format("密码不能小于{0}个字 符")
        
			},
        
		}
        
	});
        
	$("#register_form").validate({
        
		rules: {
        
			username: "required",
        
			password: {
        
				required: true,
        
				minlength: 5
        
			},
        
			rpassword: {
        
				equalTo: "#register_password"
        
			},
        
			email: {
        
				required: true,
        
				email: true
        
			}
        
		},
        
		messages: {
        
			username: "请输入姓名",
        
			password: {
        
				required: "请输入密码",
        
				minlength: jQuery.format("密码不能小于{0}个字 符")
        
			},
        
			rpassword: {
        
				equalTo: "两次密码不一样"
        
			},
        
			email: {
        
				required: "请输入邮箱",
        
				email: "请输入有效邮箱"
        
			}
        
		}
        
	});
        
});
        
$(function() {
        
	$("#register_btn").click(function() {
        
		$("#register_form").css("display", "block");
        
		$("#login_form").css("display", "none");
        
	});
        
	$("#back_btn").click(function() {
        
		$("#register_form").css("display", "none");
        
		$("#login_form").css("display", "block");
        
	});
        
});

      资源下载地址：http://download.csdn.net/detail/qq_19558705/9358603

      现在我们开始谈谈所用到的知识点：

      ①bootstrap的布局：

      bootstrap用的是网格布局，使用col-*-*

      使用条件：要在.container和.row下才能使用，结构如下：

      1. <div class="container">
      2. <div class="row">
      3. <div class="col-*-*"></div>
      4. <div class="col-*-*"></div>
      5. </div>
      6. <div class="row">...</div>
      7. </div>
      <div class="container">
      
   <div class="row">
      
      <div class="col-*-*"></div>
      
      <div class="col-*-*"></div>
      
   </div>
      
   <div class="row">...</div>
      
</div>

      参考值：
      col-xs-*:小于768px，手机

      col-sm-*:大于768px，平板

      col-md-*:大于998px，普通电脑，笔记本之类

      col-lg-*:大于1200px，一般为大型台式电脑

      可以同时使用，达到跨多个设备效果

      偏移：col-*-offset-*

      ②表单：

      这里的表单和普通表单没什么太多区别，我就不多说了。

      ③font-awesome的使用：

      使用的是4.3.0版本，使用方法

      1. <i class="fa fa-check fa-lg"></i>
      <i class="fa fa-check fa-lg"></i>

      fa-lg表示大图

      更多icon参考：http://fontawesome.dashgame.com/

      ④jquery-validate表单验证：

      这是我要讲的重点，

      第一步：首先到导入jquery-validate第三方资源，

      第二步：创建好form表单，初始化validate

      1. $("#login_form").validate({
      2. rules: {
      3. username: "required",
      4. password: {
      5. required: true,
      6. minlength: 5
      7. },
      8. },
      9. messages: {
      10. username: "请输入姓名",
      11. password: {
      12. required: "请输入密码",
      13. minlength: jQuery.format("密码不能小于{0}个字 符")
      14. },
      15. }
      16. });
      $("#login_form").validate({
      
		rules: {
      
			username: "required",
      
			password: {
      
				required: true,
      
				minlength: 5
      
			},
      
		},
      
		messages: {
      
			username: "请输入姓名",
      
			password: {
      
				required: "请输入密码",
      
				minlength: jQuery.format("密码不能小于{0}个字 符")
      
			},
      
		}
      
	});

      注意这里的login_form必须是form表单上的选择器，笔者因为将其设置在div上，控制台显示settings没有被定义的错误。这里的username和password都是form表单中的name值；rules是规则，message是提示的信息

      required:true表示该字段为必填，

      minlength表示长度至少为5，maxlength是html5支持的，所以不用在这里面设置

      equalTo表示与某某相同，后面接的是第一个值，"#id"或者是".class"

      message中对应的内容后面就是提示的文字信息。可以直接copy我的代码，然后根据自己的需要修改。

      ⑤背景自适应屏幕大小：

      不知道前到处找文档，知道后才发现好简单，那就是background-size:cover;这样可以做到背景图片和浏览器大小一样了。很简单吧。

      bootstrap创建登录注册页面github下载地址：

      https://github.com/ITDragonBlog/daydayup/blob/master/bootstrap

转自：https://blog.csdn.net/qq_19558705/article/details/50318981

bootstrop登陆页面的更多相关文章

  1. Springsecurity3.1.3配置多个登陆页面

    需求:网站的前台和后台不同的url需要不同的登陆页面,不同的异常捕获方式. spring-security3.1以后的版本支持多个<http>标签,因此本文所采用的方式就是使用两个,实际上 ...

  2. MUI APP防止登陆页面出现白屏

    最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以, ...

  3. web系统登陆页面增加验证码

    传统登陆页面中包含两个输入项: • 用户名 • 密码有时为了防止机器人进行自动登陆操作,或者防止恶意用户进行用户信息扫描,需增加动态验证码功能.此时,登陆页面中包含了三个输入项: • 用户名 • 密码 ...

  4. Ajax 提交session实效跳转到完整的登陆页面

    在spring security 中 Ajax提交时,session超时,局部加载登陆页面,为解决这个问题,重写ajax提交,返回的是modeview或者没有制定datatype时; 如果检测到加载到 ...

  5. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  6. iOS 本地加载html登陆页面

    Html的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 修改cas登陆页面-服务器端

    原文地址:http://www.cnblogs.com/liveandevil/archive/2013/03/06/2946341.html 1.cas统一认证的登陆页面位于:cas目录/WEB-I ...

  8. Struts2文件配置 登陆页面

    Struts 版本号 struts-2.3.16.3 web.xml 配置 <?xml version=”1.0″ encoding=”UTF-8″?> <web-app versi ...

  9. .Net程序猿玩转Android开发---(3)登陆页面布局

    这一节我们来看看登陆页面如何布局.对于刚接触到Android开发的童鞋来说.Android的布局感觉比較棘手.须要结合各种属性进行设置,接下来我们由点入面来 了解安卓中页面如何布局,登陆页面非常eas ...

随机推荐

  1. html ajax 异步加载 局部刷新

    1. getJSON 优点: 简单高效,直接返回处理好的json数据 缺点: 只能使用get请求和使用json数据 <script src ='jquery.min.js'></sc ...

  2. Git版本控制 Git、github,gitlab相关操作

    目录 关于版本控制 版本管理工具 集中式管理 分布式管理 git版本管理 git介绍 软件安装 Git工作状态 原理流程步骤 git基本操作 对文件进行修改 分支 共享仓库 创建共享仓库: 共享仓库上 ...

  3. STM32F103ZET6时钟

    1.STM32F103ZET6时钟说明 STM32F103ZET6的时钟树图如下所示: STM32F103ZET6有很多个时钟源,分别有: HSE:高速外部时钟信号. HSI:高速内部部时钟信号. L ...

  4. #VScodd集成Git Bash 命令行 #怎么把Git Bash集成到VScode

    配置 Step1. File-Preferences-Setting Step2. 搜索"terminal>integrated>shell A" Step3. 找到t ...

  5. 使用 Spring data redis 结合 Spring cache 缓存数据配置

    使用 JavaConfig 方式配置 依赖 jar 包: jedis.spring-data-redis 首先需要进行 Redis 相关配置 @Configuration public class R ...

  6. Android 启动一个Activity的几种方式

    启动一个Activity的几种方式在Android中我们可以通过下面两种方式来启动一个新的Activity,注意这里是怎么启动,而非启动模式!分为显示启动和隐式启动! 1.显式启动,通过包名来启动,写 ...

  7. Markdown语法详解-cnblog

    博客的重要性 博客,英文名为Blog,它的正式名称为网络日记. 为什么要写博客? 需要总结和思考.有时候我们一直在赶路,却忘了放慢脚步 提升文笔组织能力 提升学习总结能力 提升逻辑思维能力 帮助他人, ...

  8. pgsql中的行锁

    pgsql中的行锁 前言 用户可见的锁 regular Lock 行级别 FOR UPDATE FOR NO KEY UPDATE FOR SHARE FOR KEY SHARE 测试下加锁之后的数据 ...

  9. virtual box设置网络，使用nat网络和仅主机(Host Only)网络进行连接

    virtual box设置网络,使用nat网络和仅主机(Host Only)网络进行连接 前言 作为程序员难免要在本机电脑安装虚拟机,最近在用virtual box安装虚拟机的时候遇到了点问题. 对于 ...

  10. HashMap实现原理（JDK1.8）

    概述HashMap在底层数据结构上采用了数组+链表+红黑树,通过散列映射来存储键值对数据因为在查询上使用散列码(通过键生成一个数字作为数组下标,这个数字就是hash code)所以在查询上的访问速度比 ...