环境准备

首先，需要准备以下文件：

1. jquery.min.js：可以去官网下载具体版本，网站：Download jQuery | jQuery

2. bootstrap.min.js：可以去官网下载具体版本，网站：https://v3.bootcss.com/

3. jquery.validate.js：可以去官网下载具体版本，网站: http://validatejs.org/#downloads

4. jdbc相关的连接包、Gson转换包、建表语句、需要在本机安装mysql数据库

5. 也可直接访问百度网盘获取项目：

地址：链接：https://pan.baidu.com/s/1TFqcj72i2nErvSKatAd-4Q?pwd=dv2r
提取码：dv2r

详细代码以及解析

数据库建表语句

CREATE TABLE
    t_bk_user
    (
        uid INT NOT NULL AUTO_INCREMENT,
        upname VARCHAR(20),
        urname VARCHAR(120),
        upwd VARCHAR(20),
        uphone VARCHAR(20),
        uaddr VARCHAR(120),
        uhobby VARCHAR(120),
        uemail VARCHAR(120),
        PRIMARY KEY (uid)
    )
    ENGINE=InnoDB DEFAULT CHARSET=utf8 DEFAULT COLLATE=utf8_general_ci;

前端登录代码实现

执行效果：

HTML具体代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">  
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="css/login.css">  
</head>
<body>
	<div id="lform" class="lform">
		<div id="bdv1">
			<form class="form-horizontal" role="form" id="loginform" >
				<div class="form-group">
					<label for="firstname" class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="upname" id="upname" 
							   placeholder="请输入名字" style="width: 300px;" >
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label">密码</label>
					<div class="col-sm-10">
						<input type="password" name="upwd" class="form-control" id="upwd" 
							   placeholder="请输入姓" style="width: 300px;" >
					</div>
				</div>
				<div class="form-group">
					<label for="lastname" class="col-sm-2 control-label"><span id="ltips"></span></label>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default" style="width: 300px; color: black; background-color: #269ABC;"><b>登录</b></button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

JS代码：

$(function(){
	$("#loginform").validate({
		rules:{
			upname:{
				required:true,
				rangelength:[6,12]
				
			},
			upwd:{
				required:true,
				rangelength:[6,12]
			}
		},
		messages:{
			upname:{
				required:"用户名不能为空！",
				rangelength:"用户名长度必须在6-12位之间"
			},
			upwd:{
				required:"密码不能为空！",
				rangelength:"密码长度必须在6-12位之间"
			}
		},
		onfocusout: function(element) {
			$(element).valid();
		},
		submitHandler:function(form){
			$.ajax({
				type: 'GET',
				url: "http://localhost:8080/Ajaxd01/userController.do?",
				dataType:"jsonp",
				jsonp:"aaa",
				data:"upname="+$("#upname").val()+"&"+"upwd="+$("#upwd").val(),
				success: function(info){
					if(info=="pwdRight"){
						location.href="table.html";
					}else{
						$("#ltips").text("用户名或密码错误!");
						$("#ltips").css("color","red");
					}
				},
				error: function(XmlHttpRequest, textStatus, errorThrown){
						alert("ERROR");
				}
			});
		}
	});
	
})

css代码：

.lform{
	border: 1px solid;
	background-color: white;
	width: 100%;
	height: 100%;
	background: url(../img/loginbgi1.jpeg) no-repeat ;
	background-size: 100% 100%;
	background-attachment: fixed;
	
}

#bdv1{
	width: 500px;
	height: 300px;
	background-color: white;
	margin-top: 360px;
	margin-left: 800px;
}

#loginform{
	width: 500px;
	height: 300px;
	padding-top: 100px;
	margin-left: 50px;
}

后端代码实现：

地址：链接：https://pan.baidu.com/s/1TFqcj72i2nErvSKatAd-4Q?pwd=dv2r
提取码：dv2r

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/116530.html