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. jvm的类加载机制总结

    类的加载机制分为如下三个阶段:加载,连接,初始化.其中连接又分为三个小阶段:验证,准备,解析. 加载阶段 将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后再堆内创 ...

  2. Java并发基础01. 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  3. 新手必学linux文本文件编辑命令 vi vim.....

    作为一名Linux新手小白,今天就和大家简单地了解一下Linux的Vim文本编辑器的使用. Vim文本编辑器     vim编辑器的三大模式——命令模式.编辑模式和末行模式            命令 ...

  4. JLabel有点感觉了，码上

    Java中Label的姿势 Jabel与JDialog窗口的是否可见可做为弹窗. 设置字体颜色 jl.setForeground(Color.ORANGE);//设置字体颜色 设置字体与大小 jl.s ...

  5. fiddler设置重定向

    fiddler支持将指定模式的url映射到另一个指定的url,即可用于拦截某一请求,并重定向到本地的资源或其他服务器地址 fiddler常用于: 解析请求:如:解析http请求状态,请求头,请求正文, ...

  6. 【电商】性能测试网站搭建：XAMPP1.8+DBShop1.3

    1.安装准备 1.1软件版本 XAMPP的版本:XAMPP 1.8.2 DBShop的版本:DBShop 1.3   1.2.安装环境 我的环境:win10 win7,win10都可以运行的,安装步骤 ...

  7. Java时间戳获取

    Java时间戳获取方式: 1:New Date().getTime(); 2: System.currentTimeMillis();区别: New Date().getTime()的底层其实是Sys ...

  8. 从零搭建一个SpringCloud项目之Zuul(四)

    整合Zuul 为什么要使用Zuul? 易于监控 易于认证 减少客户端与各个微服务之间的交互次数 引入依赖 <dependency> <groupId>org.springfra ...

  9. 计算机网络协议，TCP数据报的分析

    一.TCP协议的特点 TCP是面向连接的运输层协议:即应用程序在使用TCP协议通信之前,要先建立TCP连接,通信结束后必须释放已建立的TCP连接 每一条TCP连接只能有两个端点:即TCP是点对点(一对 ...

  10. PHPStorm IDE 快捷键

    ⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn编辑 Command+alt+T 用 (if..else, ...