通过servlet连接数据库和HTML,完成登陆注册

提交onsubmit()方法,重置onreset()方法:

<form οnsubmit="test()" οnreset="dos()">
邮箱:<input type="text"  id="qq"/>
密码:<input type="password"  id="ee"/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />


</form>


实例:通过其判断邮箱以及密码的值为不为空

js代码块:

function test(){
	var flag=true;
	var ww=document.getElementById("qq");
	var rr=document.getElementById("ee");
	
	if((ww.value=="")&&(rr.value=="")){
		alert("不能都为空")
		flag=false;
		return flag;
		}else if(ww.value==""){
		alert("邮箱不能为空");
		flag=false;
		return flag;
		}else if(rr.value==""){
			alert("密码不能为空")
			flag=false;
			return flag;
			}else{
				alert("提交成功")
				}
		return flag;
	}

	
function dos(){
	var x=confirm("确定重置?");
	

	}

通过Servlet连接HTNL以及数据库,完成登陆注册界面:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jiemian.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">

</style>
<script type="text/javascript">
function denglu(){
	var flag=true;
	var ww=document.getElementById("qq");
	var rr=document.getElementById("ee");
	
	if((ww.value=="")&&(rr.value=="")){
		alert("不能都为空")
		flag=false;
		//return flag;
		}else if(ww.value==""){
		alert("账号不能为空");
		flag=false;
		//return flag;
		}else if(rr.value==""){
			alert("密码不能为空")
			flag=false;
			//return flag;
			}else{
				alert("提交成功")
				}
		return flag;
	}




</script>

</head>
  
  <body>
<div  id="01" align="center" style="background-color:#9CF; height:400px;width:350px; margin-left:800px;">
	<p><h1>登录界面</h1></p>
    <form action="MyServlet" οnsubmit="denglu()">
   
   		账  号:<input  id="qq" type="text" name="username" >
   		
   
   <br />
   
   		密  码:<input  id="ee" type="password" name="password">
   		
   
   <br />
   <input type="submit" value="登录" />
   <input type="button" value="注册" />
   </form>
 </div>


</body>
</html>

servlet:

package Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import po.User;

import dao.UserDao;

public class MyServlet extends HttpServlet {


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

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//设置编码
			response.setCharacterEncoding("UTF-8");
			request.setCharacterEncoding("UTF-8");
			response.setContentType("text/html"); 
			
			String username=request.getParameter("username");
			String password=request.getParameter("password");
			
			UserDao userDao=UserDao.getInstance();
			Map<String,String> map=new HashMap<String,String>();
			
			map.put("username", username);
			map.put("password", password);
			
			User user=userDao.getUserByMap(map);
		
			if(user!=null){
				
				request.getRequestDispatcher("/success.jsp").forward(request, response);
				return;
			}else{
				
				request.getRequestDispatcher("/zhuce.jsp").forward(request, response);
				return;
			}
		
	}

}

注册界面:

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'zhuce.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
function check(){
var hh=true;
	var x=document.getElementById("first").value;
	var y=document.getElementById("second").value;
	if(x!=y){
		alert("对不起密码不一致,请重新输入")
		hh=false;
		}
		return hh;
	}
</script>
  </head>
  
  <body>
<div align="center" style="background-color:#9CF; width:350px; height:400px; margin-left:800px;">
	<p><h1>注册界面</h1></p>
    <form  action="MyServlet11" οnsubmit="check()">
    	请输入账号:<input type="text" name="username"/>
        <br />
        <br />
         <br />
        <br />
        请输入密码:<input id="first" type="password"  name="password"/>
        <br />
        <br />
         <br />
        <br />
        再输入密码:<input  id="second" type="password" />
        <br />
        <br />
         <br />
        <br />
        请输入性别:<input type="text" name="sex"/>
         <br /> <br />
        <input type="submit"  style="width:200px;" value="提交" />
    </form>

</div>
  </body>
</html>


  • 11
    点赞
  • 78
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值