使用jquery ui和validate实现的弹出式登录

最新推荐文章于 2021-11-24 22:48:10 发布

杉林

最新推荐文章于 2021-11-24 22:48:10 发布

阅读量1.2k

点赞数

分类专栏：前端技术文章标签： jquery ui 弹出框登录

本文链接：https://blog.csdn.net/tjlgsha/article/details/10830537

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习使用juery，体验它的强大。

本文需用到的文件：jquery.js，jquery-ui.js，jquery.validate.js，messages_zh.js和juery的主题。jquery ui可前往官网下载，messages_zh.js是validate的本地化，可不用。

为简单，后台代码仅使用了一个servlet。

前台代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> test </title>
<link rel="stylesheet" href="themes/base/jquery-ui.css" />
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="messages_zh.js"></script>
<style>
	body{font-size:0.8em;}
	label, input { display:inline; }
	input.text { margin-bottom:8px; margin-top:8px;width:50%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
</style>
<script>
$(function() { 
	$("#myform").validate({
		rules: {
			name: {required: true},
			password: {required:true,rangelength:[6,25]}
		},
		errorPlacement:function(error, element) {
			error.appendTo(element.next().next()); 
		},
		messages:{
			"password":{required:"请输入密码！"},
			"name":{required:"请输入用户名！"}
		}
	});

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 260,
		width: 350,
		modal: true,
		buttons: {
			"登录": function() {
				if($("#myform").valid()){
					$.ajax({
						url:"LoginServlet",
						async:false,
						data:{name:$( "#name" ).val(),password:$( "#password" ).val()},
						type:"POST",
						success:function(data){
							if(data == "false"){
								alert("错误的用户名或密码！");
							}else{
								$("#username").html(data);
								$( "#dialog-form" ).dialog( "close" );
							}
						}
					});
			    }
		    },
			"取消": function() {$( this ).dialog( "close" );}
	    }
	});

	$( "#login" ).button().click(function() {
		$( "#dialog-form" ).dialog( "open" );
	});
});
</script>
<base href="<%=basePath%>">
</head>


<body>
<h3>欢迎<strong id="username"></strong></h3>
<hr>
<div id="dialog-form" title="欢迎登录">
	<form id="myform" method="post">
		<fieldset>
			<label for="name">用户名:</label>
			<input type="text" name="name" id="name" class="text" placeholder="昵称/邮箱/手机号码" /><br>
			<label style="margin-left:30px;color:red"></label><br>
			<label for="password">密   码:</label>
			<input type="password" name="password" id="password" class="text" placeholder="请输入密码"/><br>
			<label style="margin-left:30px;color:red"></label><br>
		</fieldset>
	</form>
</div>
<button id="login">登录</button>
</body>
</html>

后台代码

package com.shanlin.login;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		String password = request.getParameter("password");
		
		response.setContentType("text/html;charset=UTF-8");
		
		if(name.trim().equals("admin")&&password.trim().equals("123456")){
			response.getWriter().print(name);
		}else{
			response.getWriter().print(false);
		}
	}

}

效果如图：