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. centos7中安装redis

    http://www.open-open.com/lib/view/open1426468117367.html https://www.cnblogs.com/cndavidwang/p/64294 ...

  2. PTA数据结构与算法题目集(中文) 7-41PAT排名汇总 (25 分)

    PTA数据结构与算法题目集(中文)  7-41PAT排名汇总 (25 分) 7-41 PAT排名汇总 (25 分)   计算机程序设计能力考试(Programming Ability Test,简称P ...

  3. servlet web.xml 3.1版本的头信息

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...

  4. P3381 【模板】最小费用最大流 题解

    CSDN同步 原题链接 前置知识: 从三种算法剖析网络流本质 简要题意: 给定网络图,求图的最大流,以及流量为最大流时的最小费用. 现在假设你们看了那篇网络流博客之后,所有人都会了 \(\text{E ...

  5. Django常用的第三方包

    Django常用的第三方包 API开发 djangorestframework django-rest-multiple-models django-cors-headers 查询 django-fi ...

  6. Java第二十五天，多线程之等待唤醒机制

    当线程被创建并且被启动之后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,而是具有以下多种状态: 这六种状态之间的转换关系如下: 1.等待唤醒机制 注意: (1)两个线程之间必须用同步代码块 ...

  7. Android 6.0及以上版本如何实现从图库中选取图片和拍照功能

    XML 代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...

  8. 中阶 d03.5 （正篇）完整的Dao 操作数据库

    1.目录结构: util---JDBCUtil.java(工具包,整合建立链接和释放资源的方法) dao---UserDao.java(接口,定义方法) impl---UserDaoImpl.java ...

  9. 8.3 String 类的方法 使用分类

    String类的判断功能.获取功能. * String类的判断功能: * boolean equals(Object obj):比较字符串的内容是否相同 * boolean equalsIgnoreC ...

  10. alg-链表中有环

    typedef struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), next(nullptr) {} }ListN ...