使用bootstrap画登录页面并实现表单校验与“记住我”功能

先贴上效果图

如何实现呢？请看下面

先引用必备css和js

bootstrap.min.css

font-awesome.css //字体图标

bootstrapValidator.css

jquery-2.1.0.min.js

bootstrap.min.js

bootstrapValidator.js //表单校验

jquery.cookie.js //将用户名和密码写入cookie 用作“记住我”功能

布局代码

<img id="img" src="img/2.png" alt="">
    <div class="container">
    	<div>
    		<h2>XXXX系统</h2>
    	</div>
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
                <h3 class="form-title">用户登录</h3>
                <form id="form" action="">
                	<div class="col-md-9">
	                    <div class="form-group">
	                        <i class="fa fa-user fa-lg"></i>
	                        <input class="form-control required" type="text" placeholder="请输入登录名" id="loginName" 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="请输入密码" id="password" name="password" maxlength="8"/>	                            
	                    </div>
	                    <div class="form-group">
	                        <label class="checkbox pull-left">
	                            <input type="checkbox" name="remember" id="remember" value="0"/>记住我
	                        </label>
	                        <label class="checkbox pull-right">
	                        	<a href="menu.html" >注册新账号</a>
	                       	</label>
	                    </div>
	                    <div class="form-group col-md-offset-9">
	                        <button type="submit" class="btn btn-success pull-right" name="submit">登录</button>
	                    </div>
                	</div>
                </form>
            </div>
        </div>
    </div>

下面是登录与表单校验和实现"记住我"功能

（注意：在使用bootstrapValidator期间遇到一个问题  表单通过验证但提交表单没有反应 我在下一篇中讲解决方案）

var path = "${pageContext.request.contextPath}";
		$(function () {
			getCookie();//获取cookie
			remeberNameAndPwd();//rememberMe点击事件
			validate();//校验与登录
    	});
		
		function validate(){
			$('form').bootstrapValidator({
	            fields: {
	            	loginName: {
	                    message: '用户名验证失败',
	                    validators: {
	                        notEmpty: {
	                            message: '用户名不能为空'
	                        }
	                    }
	                },
	                password: {
	                    validators: {
	                        notEmpty: {
	                            message: '密码不能为空'
	                        }
	                    }
	                }
	            }
	        }).on('success.form.bv', function(e) {
		         $("form").submit(function(){
					var flag = $('#form').data("bootstrapValidator").isValid();//校验合格
					if(flag){
						var load = top.layer.load();
						var $form = $('#form');
						$.ajax({
							url:$form.attr('action'),
							data:$form.serialize(),
							type:'post',
							beforeSend:function(){
					        	layer.msg('正在登录');
					        },
							success:function(data){
								if(data=="success"){
									setTimeout(function(){
					    				layer.close(load);
					    				layer.msg('登录成功');
					    				setAndRemoveCookie();//是否写入cookie
					    			},1000);
					    			setTimeout(function(){
					    				//登录返回
					    				window.location.href=path+'/menu/get.do';
					    			},2000);
								}else{
									setTimeout(function(){
										layer.close(load);
										layer.msg('身份验证失败,请检查用户名或密码是否正确!',{
											time:3500 //3.5秒钟之后关闭
										});
									},1000);
								}
							},
							error:function(e){
								console.log(e);
								layer.msg('出错咯o(╥﹏╥)o,请与后台联系!',{
									btn:'我知道了'
								})
							}
						})
					}
				})
	       });
		}
		//记住用户名,默认不记住
		var checkFlag = false;
	
        function remeberNameAndPwd(){
        	//这里是当页面是从注册页面注册成功过来 
        	var remFlag = $("input[type='checkbox']").is(":checked");
        	if(remFlag==true){
        		checkFlag = true;	
        	}
        	//当在login.jsp页面点击是否记住
        	$("#rememberMe").click(function(){
        		var remFlag = $("input[type='checkbox']").is(":checked");
                if(remFlag==true){
                    $("#rememberMe").attr("checked",true);
                    checkFlag=true;
                }else{
                	$("#rememberMe").attr("checked",false);
                	checkFlag=false;
                }
        	})
        }
		
		//写入cookie与删除
		function setAndRemoveCookie(){
        //注意 密码写入cookie的时候这里没有写加密 是不安全的
			if(checkFlag){
				var loginName = $("#loginName").val();
				var password = $("#password").val();
				$.cookie("remember","true",{expires : 7 })//单位：天
				$.cookie("loginName",loginName,{expires: 7 });
				$.cookie("password",password,{expires: 7 })
				console.log($.cookie("loginName"));
			}else{
				//删除cookie
				$.cookie("remember","false",{expires:-1 });
				$.cookie("loginName",null,{expires:-1});
				$.cookie("password",null,{expires:-1});
				console.log($.cookie("password"));
			}
		}
		//获取cookie
		function getCookie(){
			if($.cookie("remember")=="true"){
				$("#rememberMe").attr("checked",true);
				$("#loginName").val($.cookie("loginName"));
				$("#password").val($.cookie("password"));
				console.log($.cookie("password"));
			}
		}

最后给出css

#img{
        width:100%;
        position: fixed; right: 0; bottom: 0;
        min-width: 100%; min-height: 100%;
        height: auto;
        z-index: -100;
        background-size: cover;
}
.form{
    background: rgba(255,255,255,0.2);width:420px;margin:120px auto;margin-right: 350px
}

/*阴影*/
.fa{
    display: inline-block;top: 25px;left: 6px;position: relative;color: #ccc;
}

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

.checkbox{
    padding-left:21px;
}