精华内容
下载资源
问答
  • jsp 用户信息注册页面

    2020-12-17 12:21:40
    jsp用户注册页面 1、注册页面 <h1>请输入用户注册信息:</h1> <form method="post" action="chack.jsp"> 用户名:<input type="text" name="username" value=""/>*<br/> 真实姓名...

    jsp用户注册页面

    1、注册页面

    <h1>请输入用户注册信息:</h1>
        <form method="post" action="chack.jsp">
            用户名:<input type="text" name="username" value=""/>*<br/>
            真实姓名:<input type="text" name="truename" value=""/>*<br/>
            密码:<input type="password" name="password" value=""/>*<br/>
            确认密码:<input type="password" name="password2" value=""/>*<br/>
            电子邮箱:<input type="text" name="email" value=""/><br/>
       	<input type="submit" value="提交" />
       	<input type="reset" value="重置"/>                
        </form>
    

    效果

    在这里插入图片描述

    2、判断是否正确及错误返回

     <jsp:useBean id="pbean" class="bean.userbean" scope="session">
      </jsp:useBean>
      <% userbean ub=new userbean();
      	ub.setUsername(request.getParameter("username"));
      	 	ub.setTruename(request.getParameter("truename"));
      	ub.setPassword(request.getParameter("password"));
      	ub.setPassword2(request.getParameter("password2"));
      	if(ub.check()!=("")){
      	out.println("清重新输入信息 5秒钟后返回注册页面"+ub.check());
      	response.setHeader("refresh","5;url=exercise1.jsp");
      	}
      	else{request.setAttribute("uesrname",ub.getUsername());
      	response.sendRedirect("sub.jsp");
      	}
      	
       %>
    

    效果

    在这里插入图片描述

    3、成功界面

      恭喜你, 注册成功! <br>
    

    效果

    在这里插入图片描述

    展开全文
  • JSP用户注册页面

    2015-11-04 11:55:59
    SP(JavaServer Pages)是一种动态页面技术。主要构成元素:Java+HTML,我们使用JSP来连接数据验证帐号密码,以下是实例代码:
  • JSP 用户注册页面

    2010-09-13 14:14:39
    在Eclipse中,用户注册页面以及跳转页面
  • jsp页面用户注册实现

    2011-12-23 15:55:54
    一个用于用户注册jsp页面,能够进行验证从数据库里
  • jsp登录注册页面

    2015-10-27 16:27:00
    jsp登录注册页面
  • 用户注册页面jsp

    2012-09-01 21:41:30
    用户注册页面,java jsp,密码强度提示,年月日时间选择。
  • JSP页面用户注册实现

    2012-02-09 11:17:44
    一个很简单利于教学的jsp注册文档,方便初学者理解jsp的常用方法
  • 简单的用户注册功能,有两个jsp页面,在第一个页面点提交可以在另一个jsp页面显示用户注册信息。供初学者使用
  • 简单的一个jsp用户注册界面,并在另一页面显示用户的注册信息
  • JavaEE学习之jsp编写登陆注册页面

    千次阅读 2019-11-13 20:52:47
    JavaEE学习之jsp编写登陆注册页面 刚开始学习javaee,好多东西需要一点点积累。最近用jsp和简单的JavaScript写的登录注册界面,简单做一下记录。 准备–页面布局 登录和注册界面的HTML全都是用Dreamweaver画的,具体...

    JavaEE学习之jsp编写登陆注册页面

    刚开始学习javaee,好多东西需要一点点积累。最近用jsp和简单的JavaScript写的登录注册界面,简单做一下记录。

    准备–页面布局

    登录和注册界面的HTML全都是用Dreamweaver画的,具体步骤不再赘述,有需要的请自行查找资料。

    1. 页面布局基本是用的AP div,注册界面用到了表格;
    2. 在Dreamweaver中大概是如下效果登陆界面注册界面

    HTML–>jsp

    1. 首先我们在eclipse中建立一个Dynamic web project;
    2. 在WebContent文件夹下建立两个主要的jsp文件,login.jsp和register.jsp;
    3. 我们将Dreamweaver自动生成的HTML代码粘贴到jsp文件中;
    4. 另外再建四个测试用的jsp页面,ask_for_help.jsp, contact_us.jsp, homepage.jsp, successfully_register.jsp.
      如图所示
      tomcat环境的配置本文不做赘述。

    改写login.js

    1. 首先我们给 页面右上角的“首页 | 帮助中心 | 联系我们”添加链接,分别链接到homepage.jsp, ask_for_help.jsp, contact_us.jsp(可以简单实现三个jsp页面进行测试)
      添加标签来建立链接
    2. 目前没有实现登录功能……
    3. login.jsp全部代码如下
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #apDiv1 {
    	position: absolute;
    	width: 572px;
    	height: 115px;
    	z-index: 1;
    	left: 249px;
    	top: 21px;
    }
    titleForm {
    	font-size: 18px;
    	font-weight: 300;
    	color: #000;
    }
    .titleForm {
    	font-size: 24px;
    	font-weight: 600;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    .middleForm {
    	background-image: url(image/back.png);
    	background-position: center center;
    }
    .loginForm {
    	background-color: #FFF;
    }
    #apDiv2 {
    	position: absolute;
    	width: 200px;
    	height: 35px;
    	z-index: 2;
    	left: 1121px;
    	top: 3px;
    }
    #apDiv3 {
    	position: absolute;
    	width: 1485px;
    	height: 711px;
    	z-index: 3;
    	left: 6px;
    	top: 105px;
    }
    .textForm {
    	height: 40px;
    	width: 300px;
    	background-color: #FFF;
    }
    .buttonForm {
    	background-color: #39F;
    	height: 40px;
    	width: 300px;
    	color: #FFF;
    	font-size: 16px;
    }
    #apDiv4 {
    	position: absolute;
    	width: 349px;
    	height: 430px;
    	z-index: 4;
    	left: 831px;
    	top: 66px;
    }
    #apDiv5 {
    	position: absolute;
    	width: 328px;
    	height: 490px;
    	z-index: 1;
    	left: 109px;
    	top: 73px;
    }
    #apDiv6 {
    	position: absolute;
    	width: 328px;
    	height: 87px;
    	z-index: 1;
    }
    #apDiv7 {
    	position: absolute;
    	width: 326px;
    	height: 377px;
    	z-index: 2;
    	left: 1px;
    	top: 97px;
    }
    #apDiv8 {
    	position: absolute;
    	width: 200px;
    	height: 27px;
    	z-index: 4;
    	left: 113px;
    	top: 198px;
    }
    .linkForm {
    	text-decoration: underline;
    }
    
    a:link{
    	color:black;
     	text-decoration:none;  /*超链接无下划线*/
    }
    a:hover{
     	text-decoration:underline;  /*鼠标放上去有下划线*/
    }
    
    
    </style>
    <script type="text/javascript">
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    </script>
    </head>
    
    <body>
    <div id="apDiv1">
      <p class="titleForm">DYF最新 测试系统</p>
    </div>
    <div id="apDiv2">
      <p>&nbsp;</p>
      <p>
      	<a href="homepage.jsp" value="首页">首页</a>
        |
      	<a href="ask_for_help.jsp" value="帮助中心">帮助中心</a>
        |
        <a href="contact_us.jsp" value="联系我们">联系我们</a> </p>
    </div>
    <div class="middleForm" id="apDiv3">
      <div class="loginForm" id="apDiv5">
        <div id="apDiv6">
          <div align="center">
            <p>&nbsp;</p>
            <p class="titleForm">登录</p>
          </div>
        </div>
        <div id="apDiv7">
          <p align="center">
            <label for="username"></label>
            <input name="username" type="text" class="textForm" id="username" placeholder="用户名"/>
          </p>
          <p align="center">
            <label for="password"></label>
            <input name="password" type="text" class="textForm" id="password" placeholder="密码" />
          </p>
          <p align="center">
            <input name="login" type="submit" class="buttonForm" id="login" value="登录" />
          </p>
          <p align="right">&nbsp;</p>
          <div id="apDiv8">
            <div align="right"><a href="register.jsp" value="注册">注册</a></div>
            <!-- <a href="#"  style="color:black;text-decoration:none;" >测试超链接</a> -->
          </div>
          <p align="right">&nbsp; </p>
        </div>
      </div>
    </div>
    </body>
    </html>
    

    改写register.jsp

    1. 首先我们讲到两个函数οnblur=" “和οnfοcus=” ";
      onblur,当用户离开input输入框时执行一段Javascript代码;
      onfocus,当 input 输入框获取焦点时执行一段 Javascript代码;
    2. 改写input标签
      以手机号为例
      input标签是输入手机号的文本框;
      当文本框被点击(获取焦点)时执行phoneNumberTip()函数;
      当文本框被点击并且取消焦点(即鼠标离开后)执行checkPhoneNumber()函数;
     <tr>
              <td width="153"><div align="right">手机号 </div></td>
              <td width="312"><div align="center">
                <input name="phoneNumber" type="text" class="textForm" id="phoneNumber" onblur="checkPhoneNumber()" onfocus="phoneNumberTip()"/>
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="phoneNumberSpan"></span> </td>
            </tr>
    
    1. phoneNumberTip()函数实现
      该函数实现了当文本框被点击时,span标签赋值并显示 ”请输入11位手机号码,仅支持大陆地区手机号。“
      颜色为黑色。
    function phoneNumberTip(){
    	var spanNode = document.getElementById("phoneNumberSpan");
    	spanNode.innerHTML = "请输入11位手机号码,仅支持大陆地区手机号。".fontcolor("black");//.fontcolor("red");
    }
    
    1. checkPhoneNumber()函数
      该函数实现了当鼠标从文本框移开时,通过正则表达式检验手机号码输入是否符合标准;
      若文本框为空,则span标签提示”请输入手机号!“;
      若文本框不为空但手机号码格式不正确,span标签提示”手机号码格式不正确,请重新填写!“;
      若文本框内手机号码符合正则表达式格式,则span标签提示”手机号码格式正确“。
    function checkPhoneNumber(){
    	var x=document.getElementById("phoneNumber").value;
        var spanNode = document.getElementById("phoneNumberSpan");
        if(x==""|x==null){
    		spanNode.innerHTML = "请输入手机号码!";//.fontcolor("red"); 
    		return false;
        }
        else if(!/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(x)){
    		spanNode.innerHTML = "手机号码格式不正确,请重新填写!";//.fontcolor("red"); 
    		return false;
    	}else{
    		spanNode.innerHTML = "手机号码格式正确".fontcolor("black"); 
    		return true;
    	}
    }
    
    1. 其他标签及函数思想大同小异,不再赘述
    2. 提交表单函数判断
      这里用form action来提交表单,提交过程中执行checkAll()函数
    <form action="successfully_registered.jsp" method="post" onSubmit="return checkAll()">
            <tr>
              <td height="66">&nbsp;</td>
              <td><div align="center">
                <input name="login" type="submit" class="buttonForm" id="login" value="注册" />
              </div></td>
              <td>&nbsp;</td>
            </tr>
           </form>
    
    1. checkAll()函数
      checkAll()函数判断之前的验证是否都通过;
      若都通过则注册成功;
      若有验证未通过,则提示ERROR!
    function checkAll(){  
        var email = checkEmail();  
        var name = checkName();  
        var phoneNumber = checkPhoneNumber();  
        var password = checkPassword();  
        var confirm = confirmPassword();  
        if(email&&name&&phoneNumber&&password&&confirm){  
            return true;  
        }else{  
    		alert("ERROR!")
            return false;  
        }  
    } 
    
    1. register.jsp 全部代码如下
    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    function checkPhoneNumber(){
    	var x=document.getElementById("phoneNumber").value;
        var spanNode = document.getElementById("phoneNumberSpan");
        if(x==""|x==null){
    		spanNode.innerHTML = "请输入手机号码!";//.fontcolor("red"); 
    		return false;
        }
        else if(!/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(x)){
    		spanNode.innerHTML = "手机号码格式不正确,请重新填写!";//.fontcolor("red"); 
    		return false;
    	}else{
    		spanNode.innerHTML = "手机号码格式正确".fontcolor("black"); 
    		return true;
    	}
    }
    function checkPassword(){
    	var x=document.getElementById("password").value;
        var spanNode = document.getElementById("passwordSpan");
        var regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,16}');
        if(x==""|x==null){
    		spanNode.innerHTML = "请输入密码!";//.fontcolor("red"); 
    		return false;
        }
        else if (!regex.test(x)) {
        	spanNode.innerHTML = "密码中必须包含大小写字母、数字、特殊字符!8-16位";//.fontcolor("red"); 
        	return false;
        }
        else{
        	spanNode.innerHTML = "密码格式正确!".fontcolor("black");
        	return true;
        }
    }
    function confirmPassword(){
    	var x=document.getElementById("confirmPassword").value;
    	var y=document.getElementById("password").value;
        var spanNode = document.getElementById("confirmPasswordSpan");
        var regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,16}');
        if(x==""|x==null){
    		spanNode.innerHTML = "请再次输入密码";//.fontcolor("red"); 
    		return false;
        }
        else if (!regex.test(x)) {
        	spanNode.innerHTML = "密码格式不正确!";//.fontcolor("red"); 
        	return false;
        }
        else if(x!=y){
        	spanNode.innerHTML = "密码不一致!";//.fontcolor("red"); 
        	return false;
        }
        else{
        	spanNode.innerHTML = "密码输入正确!".fontcolor("black");//.fontcolor("red");
        	return true;
        }    
    }
    function checkName(){
    	var x=document.getElementById("name").value;
        var spanNode = document.getElementById("nameSpan");
        if(x==""|x==null){
    		spanNode.innerHTML = "个人姓名不能为空!";//.fontcolor("red"); 
    		return false;
        }
        return true;
    }
    function checkEmail(){
    	var x=document.getElementById("mail").value;
        var spanNode = document.getElementById("mailSpan");
    	var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
    	if(re.test(x)){
    		spanNode.innerHTML = "邮箱正确。".fontcolor("black");
    		return true;
    	}else{
    		spanNode.innerHTML = "请输入正确的邮箱!";
    		return false;
    	}
    }
    function checkAll(){  
        var email = checkEmail();  
        var name = checkName();  
        var phoneNumber = checkPhoneNumber();  
        var password = checkPassword();  
        var confirm = confirmPassword();  
        if(email&&name&&phoneNumber&&password&&confirm){  
            return true;  
        }else{  
    		alert("ERROR!")
            return false;  
        }  
    } 
    
    function phoneNumberTip(){
    	var spanNode = document.getElementById("phoneNumberSpan");
    	spanNode.innerHTML = "请输入11位手机号码,仅支持大陆地区手机号。".fontcolor("black");//.fontcolor("red");
    }
    function passwordTip(){
    	var spanNode = document.getElementById("passwordSpan");
    	spanNode.innerHTML = "请输入8-16位密码,需包含大小写字母、数字、特殊字符。".fontcolor("black");
    }
    function confirmPasswordTip(){
    	var spanNode = document.getElementById("confirmPasswordSpan");
    	spanNode.innerHTML = "请再次填写一遍密码,以辅助监测密码是否输入正确。".fontcolor("black");
    }
    function nameTip(){
    	var spanNode = document.getElementById("nameSpan");
    	spanNode.innerHTML = "请输入个人姓名。".fontcolor("black");
    }
    function checkEmailTip(){
    	var spanNode = document.getElementById("mailSpan");
    	spanNode.innerHTML = "请设定一个安全邮箱,忘记密码时可通过此邮箱找回密码。".fontcolor("black");
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #apDiv1 {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    	left: 9px;
    }
    .titleForm {	font-size: 24px;
    	font-weight: 600;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    #apDiv2 {
    	position: absolute;
    	width: 364px;
    	height: 48px;
    	z-index: 2;
    	left: 56px;
    	top: 33px;
    }
    #apDiv3 {
    	position: absolute;
    	width: 200px;
    	height: 61px;
    	z-index: 2;
    	left: 440px;
    	top: 17px;
    }
    .title2Form {
    	font-size: 30px;
    	font-weight: 700;
    }
    .backForm {
    	background-image: none;
    	background-attachment: scroll;
    	background-position: center top;
    	background-color: #EFEFEF;
    }
    .back2Form {
    	background-color: #FFF;
    }
    #apDiv4 {
    	position: absolute;
    	width: 132px;
    	height: 73px;
    	z-index: 2;
    	left: 1328px;
    	top: 23px;
    }
    #apDiv5 {
    	position: absolute;
    	width: 1499px;
    	height: 788px;
    	z-index: 2;
    	top: 130px;
    	left: 7px;
    }
    #apDiv6 {
    	position: absolute;
    	width: 1368px;
    	height: 639px;
    	z-index: 1;
    	left: 58px;
    	top: 39px;
    }
    #apDiv7 {
    	position: absolute;
    	width: 1004px;
    	height: 589px;
    	z-index: 1;
    	left: 277px;
    	top: 17px;
    }
    .textForm {
    	height: 30px;
    	width: 300px;
    	background-color: #FFF;
    }
    .codeFomr {
    	height: 30px;
    	width: 150px;
    }
    .getCodeButtonForm {
    	height: 30px;
    	width: 140px;
    	z-index: auto;
    	left: auto;
    	top: auto;
    	right: auto;
    	bottom: auto;
    	position: fixed;
    }
    .buttonForm {
    	background-color: #3CF;
    	height: 40px;
    	width: 300px;
    	color: #FFF;
    	font-size: 16px;
    }
    #apDiv8 {
    	position: absolute;
    	width: 200px;
    	height: 115px;
    	z-index: 2;
    	left: 664px;
    	top: 634px;
    }
    #apDiv9 {	position: absolute;
    	width: 200px;
    	height: 35px;
    	z-index: 2;
    	left: 1121px;
    	top: 3px;
    }
    </style>
    </head>
    
    <body>
    <div id="apDiv1">
      <div id="apDiv3">
        <p class="title2Form">|用户注册</p>
      </div>
      <div id="apDiv4">
        <p><a href = "homepage.jsp" value="首页">首页</a> 
            <a href = "login.jsp" value="登录">登录</a>    </p>
      </div>
      <p class="titleForm">&nbsp;</p>
      <div id="apDiv2">
        <p class="titleForm">DYF最新 测试系统</p>
      </div>
      <p class="titleForm">&nbsp;</p>
    </div>
    
    <div class="backForm" id="apDiv5">
      <div class="back2Form" id="apDiv6">
        <div id="apDiv7">
          <p align="center">
            <label for="code"></label>
          </p>
          <table width="930" height="462">
            <tr>
              <td width="153"><div align="right">手机号 </div></td>
              <td width="312"><div align="center">
                <input name="phoneNumber" type="text" class="textForm" id="phoneNumber" onblur="checkPhoneNumber()" onfocus="phoneNumberTip()"/>
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="phoneNumberSpan"></span> </td>
            </tr>
            <tr>
              <td><div align="right">短信验证码</div></td>
              <td><div align="center">
                <input name="code" type="text" class="codeFomr" id="code" />
                <input name="getCode" type="submit" class="codeFomr" id="getCode" value="提交" />
              </div></td>
              <td>提示内容</td>
            </tr>
            <tr>
              <td><div align="right">密码</div></td>
              <td><label for="password"></label>
                <div align="center">
                  <input name="password" type="text" class="textForm" id="password" onblur="checkPassword()" onfocus="passwordTip()"/>
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="passwordSpan"></span> </td>
            </tr>
            <tr>
              <td><div align="right">密码确认</div></td>
              <td><label for="confirmPassword"></label>
                <div align="center">
                  <input name="confirmPassword" type="text" class="textForm" id="confirmPassword" onblur="confirmPassword()" onfocus="confirmPasswordTip()"/>
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="confirmPasswordSpan"></span> </td>
            </tr>
            <tr>
              <td height="48"><div align="right">姓名</div></td>
              <td class="textForm"><div align="center">
                <input name="name" type="text" class="textForm" id="name" onblur="checkName()" onfocus="nameTip()" />
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="nameSpan"></span> </td>
            </tr>
            <tr>
              <td><div align="right">安全邮箱</div></td>
              <td><label for="mail"></label>
                <div align="center">
                  <input name="mail" type="text" class="textForm" id="mail" onblur="checkEmail()" onfocus="checkEmailTip()" />
              </div></td>
              <td width="449"> <span  style="font-size:13px;color:red" id="mailSpan"></span> </td>
            </tr>
            <tr>
              <td height="53">&nbsp;</td>
              <td><label for="item"></label>
                <label for="iterm"></label>            <div align="center">
                  <input type="checkbox" name="item" id="item" />
                  我已阅读并同意服务条款 
                </div>          </td>
              <td>&nbsp;</td>
            </tr>
            
    	  <form action="successfully_registered.jsp" method="post" onSubmit="return checkAll()">
            <tr>
              <td height="66">&nbsp;</td>
              <td><div align="center">
                <input name="login" type="submit" class="buttonForm" id="login" value="注册" />
              </div></td>
              <td>&nbsp;</td>
            </tr>
           </form>
          </table>
          <p align="center">&nbsp;</p>
        </div>
      </div>
      
      <div id="apDiv8">
        <p>&nbsp;</p>
        <p> <a href="homepage.jsp" value="首页">首页</a> | <a href="ask_for_help.jsp" value="帮助中心">帮助中心</a> | <a href="contact_us.jsp" value="联系我们">联系我们</a></p>
      </div>
    </div>
    </body>
    </html>
    

    小结

    1. 这只是实现注册表单实时验证的一种方法;

    2. 本文所示可能存在很多不合理的地方没有考虑到;
      比如:
      在用Dreamweaver给页面布局时,布局大小用相对大小(百分比)而不是绝对大小(xxx px)更合适
      而且例子中的正则表达式也不是很规范
      密码没有用到隐藏显示。
      (有关上述细节问题大家可以从其他地方找到更好的详细的吗解答方案,本例的重点还是侧重于表单实时验证的问题)

    3. 但我只是想从这个例子中帮助自己记录学习的过程,同时希望能给Java EE初学者一些帮助。

    展开全文
  • 效果展示 在注册页面填写完注册...注册页面 register.jsp: <form action="show.jsp" method="post"> //show.jsp与register.jsp均在WebContent目录下,故action提交的路径直接为"show.jsp" //method="post...

     效果展示

    在注册页面填写完注册信息后,点击注册按钮,然后跳转到展示页面展示注册的信息:

    关键代码

    注册页面 register.jsp:

    <form action="show.jsp" method="post">
    //show.jsp与register.jsp均在WebContent目录下,故action提交的路径直接为"show.jsp"
    //method="post"可以在标题栏隐藏注册信息    
        姓名:<input type="text" name="uname" /><br/>
        年龄:<input type="text" name="uage" /><br/>
        密码:<input type="password" name="upwd" /><br/>
        爱好:<br/>
        <input type="checkbox" name="uhobbies" value="篮球"/>篮球<br/>
        <input type="checkbox" name="uhobbies" value="足球"/>足球<br/>
        <input type="checkbox" name="uhobbies" value="乒乓球"/>乒乓球<br/>
        <input type="submit" value="注册" /><br/>
    </form>

    信息显示页面 show.jsp:

    <%
        request.setCharacterEncoding("utf-8");    //设置注册页面请求的消息编码格式为"utf-8"
        String name = request.getParameter("uname");    //获取用户名
        int age = Integer.parseInt(request.getParameter("uage"));    //获取用户年龄
        String password = request.getParameter("upwd");    //获取用户密码
        String[] hobbies = request.getParameterValues("uhobbies");    //获取用户爱好
    %>
    
    注册成功,信息如下:<br/>
    姓名:<%=name %><br/>
    年龄:<%=age %><br/>
    密码:<%=password %><br/>
    爱好:<br/>
    
    <!--用for循环显示爱好-->
    <%	
        if(hobbies != null){    //判断多选框是否被选中
              for(String hobbie : hobbies){
                out.print(hobbie + "&nbsp;");
              }
        }
    %>

     

    展开全文
  • 文章目录一、目标二、注册页面的实现Ⅰ.实现注册页面跳转Ⅱ.制作注册页面Ⅲ.完善dbHelper类Ⅳ.创建RegisterServletⅤ.效果展示 一、目标 在之前的一篇文章中我们做了登陆界面,并且实现了登陆时与数据库信息的交互...


    一、目标

    在之前的一篇文章中我们做了登陆界面,并且实现了登陆时与数据库信息的交互,成功登陆了页面。今天,接下去,实现注册界面的设计以及功能实现。

    二、注册页面的实现

    Ⅰ.实现注册页面跳转

    <%--
      Created by IntelliJ IDEA.
      User: 35192
      Date: 2021/1/21
      Time: 20:33
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>My JSP 'index.jsp' starting page</title>
      </head>
      <body>
        <%-- 用户登录界面 --%>
    
        <div align="center" style="background-color: lawngreen">
          <%-- 当点击登陆的时候,以表单的形式提交信息,启动LoginServlet --%>
          <h1 align="center">用户登陆</h1>
          <form action="/LoginServlet" method="post"><%--   登录界面以表格的形式展现    --%>
              <table>
                  <tr>
                      <td>用户名:</td>
                      <td><input type="text" name="username" placeholder="请输入用户名"></td>
                  </tr>
                  <tr>
                      <td>密码:</td>
                      <td><input type="text" name="pwd" placeholder="请输入用密码"></td>
                  </tr>
                  <tr>
                      <%-- 合并表格两列 --%>
                      <td colspan="2">
                          <input type="submit" value="登陆" style="margin-left: 50px;margin-top: 5px">
                          &nbsp;
                          <input type="button" value="注册" style="margin-left: 55px;margin-top: 5px" onclick="forRegister()">
                      </td>
                  </tr>
             </table>
          </form>
        </div>
      <script type="text/javascript">
          /**
           * 实现注册页面的跳转
           */
          function forRegister() {
              window.location = "register.jsp";
          }
      </script>
      </body>
    </html>
    
    • 首先对注册按钮添加onclick点击事件,执行javascript跳转方法forRegister(),跳转到注册页面。
      在这里插入图片描述

    Ⅱ.制作注册页面

    <%--
      Created by IntelliJ IDEA.
      User: 35192
      Date: 2021/1/23
      Time: 22:11
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <div align="center">
        <h1>用户注册</h1>
        <%--  将表单信息提交到RegisterServlet中 --%>
        <form action="/RegisterServlet" method="post">
            <table>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username" placeholder="请输入用户名" autocomplete="off" ></td>
                    <%--  autocomplete="off"   防止浏览器自动填充内容    --%>
                </tr>
                <tr>
                    <td valign="top">&nbsp;&nbsp;&nbsp;码:</td>
                    <td><input type="password" name="pwd" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td valign="top">手机号:</td>
                    <%%>
                    <td>
                        <input type="text" name="phone" placeholder="请输入手机号" maxlength="11" >
                    </td>
                    <%%>
                </tr>
                <tr>
                    <td valign="top">&nbsp;&nbsp;&nbsp;别:</td>
                    <td>
                        <input type="radio" name="sex" value=""><input type="radio" name="sex" value=""></td>
                </tr>
                <tr>
                    <td valign="top">&nbsp;&nbsp;&nbsp;</td>
                    <td><input type="text" name="age" placeholder="请输入年龄" maxlength="2"></td>
                </tr>
                <tr>
                    <td valign="top">&nbsp;&nbsp;&nbsp;好:</td>
                    <td>
                        <input type="checkbox" name="hobby" value="电子竞技">电子竞技
                        <input type="checkbox" name="hobby" value="美食鉴赏">美食鉴赏
                        <br>
                        <input type="checkbox" name="hobby" value="思考人生">思考人生
                        <input type="checkbox" name="hobby" value="养精蓄锐">养精蓄锐
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit" value="注册"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" value="重填"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    返回顶部


    Ⅲ.完善dbHelper类

    • 检验用户是否可以创建
    • 通过sql查询语句,对已存在用户进行匹配查询
     /**
         * 判断用户是否可以创建
         * @param username
         * @return
         */
         public boolean isHasUser(String username){
            try {
                String sql = "select * from userinfo_copy1 where username=?";
                preparedStatement = connection.prepareStatement(sql);
                preparedStatement.setString(1,username);
                resultSet = preparedStatement.executeQuery();
                // 判断用户是否已经存在
                if (resultSet.next()){
                    return false;
                } else {
                    return true;
                }
            } catch (Exception e){
                e.printStackTrace();
                return false;
            }
         }
    
    • 实现用户注册功能
    • 数据库sql语句应当为insert添加数据
       /**
         * 实现用户注册
         * @param username
         * @param pwd
         * @param age
         * @param sex
         * @param hobby
         * @param phone
         * @return
         */
        public int register(String username,String pwd,int age,String sex,String hobby,String phone){
            try{
                // 1.连接数据库
                getConnection();
                // 2.判断用户是否可以创建
                if(isHasUser(username)){
                    String sql = "insert into userinfo_copy1(username,pwd,age,sex,hobby,phone,image) values(?,?,?,?,?,?,?)";
                    preparedStatement = connection.prepareStatement(sql);
                    preparedStatement.setString(1,username);
                    preparedStatement.setString(2,pwd);
                    preparedStatement.setInt(3,age);
                    preparedStatement.setString(4,sex);
                    preparedStatement.setString(5,hobby);
                    preparedStatement.setString(6,phone);
                    preparedStatement.setString(7,"");  // 默认头像
                    int num = preparedStatement.executeUpdate();
                    if(num>0){
                        return 1;
                    }else {
                        return 2;
                    }
                }else{
                    return 3;
                }
            }catch (Exception e){
                e.printStackTrace();
                return 0;
            }
        }
    

    返回顶部


    Ⅳ.创建RegisterServlet

    • 获取表单信息usernamepwdsexagehobbyphone
    • 这里要注意hobby值的形式,由于hobby是由复选框checkbox产生的,所以传输的时候servlet得到的是一组数据,应当以数组的形式接收;并且最终要以字符串的形式写入数据库
    import com.zte.dbHelper;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet(name = "RegisterServlet",urlPatterns = "/RegisterServlet")
    public class RegisterServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 对应结果的编码方式设置
            response.setContentType("text/html;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            request.setCharacterEncoding("UTF-8");
            // 内容输出
            PrintWriter out = response.getWriter();
            // 1.获取表单信息
            String username = request.getParameter("username");
            String pwd = request.getParameter("pwd");
            String sex = request.getParameter("sex");
            int age = Integer.parseInt(request.getParameter("age"));
            // 2.以数组的形式接收复选框传输的hobby值
            String hobby[] = request.getParameterValues("hobby");
            //  创建变量转存hobby为字符串
            String newHobby = ""; 
            //  将爱好数组转为字符串
            for (int i = 0; i < hobby.length; i++) {
                if (i == hobby.length - 1) {
                    newHobby += hobby[i];
                } else {
                    newHobby += hobby[i] + ",";
                }
            }
            String phone = request.getParameter("phone");
            // 3.创建dbHelper对象
            dbHelper db = new dbHelper();
            // 4.进行用户注册
            switch (db.register(username, pwd, age, sex, newHobby, phone)) {
                case 0:
                    out.println("<script>");
                    out.println("alert('系统错误');");
                    out.println("window.location='index.jsp';");
                    out.println("</script>");
                    break;
                case 1:
                    out.println("<script>");
                    out.println("alert('注册成功');");
                    out.println("window.location='userinfo.jsp';");
                    out.println("</script>");
                    break;
                case 2:
                    out.println("<script>");
                    out.println("alert('注册失败');");
                    out.println("window.location='register.jsp';");
                    out.println("</script>");
                    break;
                case 3:
                    out.println("<script>");
                    out.println("alert('注册失败,该用户已存在');");
                    out.println("window.location='index.jsp';");
                    out.println("</script>");
                    break;
            }
            // 刷新、关闭
            out.flush();
            out.close();
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request, response);
        }
    }
    

    返回顶部


    Ⅴ.效果展示

    在这里插入图片描述
    在这里插入图片描述

    返回顶部


    上一篇:登陆界面 ---- 数据库信息交互                              下一篇:【JSP】注册页面:用户注册时用户名限制

    展开全文
  • jsp设计注册页面

    千次阅读 2019-06-18 09:59:37
    这是页面访问图: 源代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <style > <!-- 元素的设计: --> td....
  • JSP作业3 - 使用JSP实现简单的用户登录注册页面

    万次阅读 多人点赞 2017-06-10 10:27:44
    实验要求:将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成...
  • 实验要求: ...在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功。 代码 登录页面index.html <!DOCTYPE html> <html lang
  • servlet用户注册页面前两种输入为空和已注册情况都成功了,但往数据库插入新的数据不成功,求各位大神帮我看下哪里的问题
  • JSP注册页面代码包括验证信息和数据库的连接
  • JSP用户注册登陆注销JSP页面

    千次阅读 2016-08-16 16:59:57
    一:JSP登陆页 login.jsp: [html] view plain copy %@ page contentType="text/html" pageEncoding="UTF-8" %>  html>   head>   meta http-equiv="Context-Type" content=...
  • jsp注册页面 加注册后显示信息 完全网页JSP+COOKIES
  • jsp自己做的简单登录,注册页面,用SQL数据库连接。可以供初学者学习,共同进步。
  • JSP用户提交页面编码

    2011-06-30 08:54:45
    JSP用户提交页面编码,JSP用户提交页面编码
  • 具体要求:(1)登录页面设计和注册页面设计(JSP实现)完善前面实验完成的页面设计(注意:注册页面中,密码应该输入2次,并进行确认验证) (2)创建Servlet至少包括3个Servlet:登录验证Servlet;注册信息处理...
  • 注册页面 jsp页面 登录页面 jsp登录页面 运行结果跳转 运行界面相互跳转然后登录成功会出来用户信息列表 就这样跳转链接加上简易的注册登录就写完了。
  • jsp注册页面代码

    千次阅读 2014-04-13 12:49:19
    用户信息的bean: package chen; public class UserBean {  private String userid;  private String password;  public void setUserId(String userid)  {  this.user
  • JSP注册验证代码块,适合初学者使用。
  • jsp注册页面_access数据库,实现js验证数据,ajax验证用户名
  • jsp实现简单的注册页面

    千次阅读 2020-05-10 10:16:53
    注册页面.jsp <body> <form action="dologin.jsp" method="post"> 用户名:<input type="text" name="username"><br> 密码:<input type="password" name="password"><br>...
  • jsp_用户注册界面

    2014-09-27 16:29:24
    jsp用户注册页面,简单的注册页面java代码,需要的朋友可以试一下。
  • 登录和注册jsp页面+servlet+javaBean

    热门讨论 2008-09-27 15:03:09
    登录和注册jsp页面+servlet+javaBean登录和注册jsp页面+servlet+javaBean登录和注册jsp页面+servlet+javaBean登录和注册jsp页面+servlet+javaBean登录和注册jsp页面+servlet+javaBean登录和注册jsp页面+...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,458
精华内容 26,583
关键字:

jsp用户信息注册页面