zoukankan      html  css  js  c++  java
  • 2019.5.8 作业,登录,注销

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>系统界面</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <%
    	String error = "";
    	Object mess = request.getAttribute("error");
    	if(mess!=null)
    		error = (String)mess;
    %>
    <body>
    <div style="margin:0 auto;">
    <img src="img/1.jpg" width="390px" height="150px">
    <h1 id="id">系统界面</h1>
    <form id="fm" action="doLogin.jsp" method="post">
    	<p>帐号:<input type="text" name="userName" placeholder="请输入用户名" ><span style="color:red">*</span></p>
    	<p>密码:<input type="password" name="userPass" placeholder="请输入密码"><span style="color:red">*</span></p>
    	<p><input type="submit" value="登录">    
    		<button type="button" onclick="javascript:location.href='<%=request.getContextPath() %>/register.jsp'">注册</button>
    		<span style="color:red"><%=error %></span>
    	</p>
    </form>
    </div>
    
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>登录信息处理</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div style="margin:0 auto;">
    <img src="img/1.jpg" width="390px" height="150px">
    <%
    	request.setCharacterEncoding("utf-8");
    	String name = request.getParameter("userName");
    	String pass = request.getParameter("userPass");
    	if("chenxiaojin".equals(name)&&"smile741521".equals(pass)){
    		response.sendRedirect("success.jsp");
    		session.setAttribute("userName", name);
    	}else{
    		request.setAttribute("error", "*用户名或密码错误");
    		request.getRequestDispatcher("login.jsp").forward(request, response);
    	}
    %>
    </div>
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>登录成功界面</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div style="margin:0 auto;">
    <img src="img/1.jpg" width="390px" height="150px">
    <%
    	String name = (String)session.getAttribute("userName");
    %>
    <h1>登录成功!!欢迎您!!<%=name %></h1>
    <p><a href="out.jsp">注销</a></p>
    </div>
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div style="margin:0 auto;">
    <img src="img/1.jpg" width="390px" height="150px">
    <h1 id="id">用户注册</h1>
    <form id="fm" action="doRegister.jsp" method="post">
    	<p>帐号:<input type="text" name="userName" placeholder="请输入用户名" ><span style="color:red">*</span></p>
    	<p>密码:<input type="password" name="userPass" placeholder="请输入密码"><span style="color:red">*</span></p>
    	<p>性别:<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女</p>
    	<p>邮箱:<input name="email" type="text" placeholder="请输入邮箱"/><span style="color:red">*</span></p>
    	<p>爱好: <input type="checkbox" name="hobby" value="听歌">听歌 
    			<input type="checkbox" name="hobby" value="篮球">篮球 
    			<input type="checkbox" name="hobby" value="足球">足球 
    			<input type="checkbox" name="hobby" value="跑步">跑步 
    			<input type="checkbox" name="hobby" value="玩游戏">玩游戏
    	</p>
    	<p><input type="submit" value="提交">    <input type="reset" value="重置">
    	</p>
    </form>
    </div>
    
    <script>
    	$(function() {
    		/* 用户名验证 */
    		$("[name='userName']").on("input", function() {
    			var reg = /^[A-Za-z0-9_-u4e00-u9fa5]+$/
    			var userName_value = $(this).val();
    			if (reg.test(userName_value) == false) {
    				$(this).next().html("X用户名格式不正确X").css("color", "red")
    			} else if(userName_value == null || userName_value == ""){
    				$(this).next().html("X用户名不能为空X").css("color", "red")
    			}else{
    				$(this).next().html("√").css("color", "green")
    			}
    		})
    			
    		/* 密码验证 */
    		$("[name='userPass']").on("input",function(){
    			var reg = /^[w_-]{6,16}$/
    			var userPass_value = $(this).val();
    			if(reg.test(userPass_value)==false){
    				$(this).next().html("X密码格式不正确X").css("color", "red")
    			} else {
    				$(this).next().html("√").css("color", "green")
    			}
    		})
    			
    		/*邮箱验证*/
    		$("[name='email']").on("input",function() {
    			var reg = /^w[-w.+]*@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}$/
    			var email_value = $(this).val();
    			if (reg.test(email_value) == false) {
    				$(this).next().html("×邮箱格式不正确").css("color", "red")
    			} else {
    				$(this).next().html("√").css("color","green")
    			}
    		})
    			
    		/* 提交验证 */
    		$("#fm").submit(function() {
    			var userName_verify = $("[name='userName']").next().html()
    			var email_verify = $("[name='email']").next().html()
    			var userPass_verify = $("[name='userPass']").next().html()
    			if (userName_verify == "√" && userPass_verify == "√" && email_verify == "√") {
    				return true;
    			} else {
    				return false;
    			}
    		})
    	})
    </script>
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>注册信息页面</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <%
    	request.setCharacterEncoding("utf-8"); 
    	String name = request.getParameter("userName"); 
    	String pass = request.getParameter("userPass"); 
    	String sex = request.getParameter("sex"); 
    	String[] hobbies = request.getParameterValues("hobby");
    	String email = request.getParameter("email"); 
    %>
    <%
    	/* request.setAttribute("userName", name); */
    	session.setAttribute("userName", name);
    	session.setAttribute("userPass", pass);
    	/* request.getRequestDispatcher("show_info.jsp").forward(request, response); */
    	response.sendRedirect("show_info.jsp"); 
    %>
    <%-- <jsp:forward page="show_info.jsp"/> --%>
    <%-- <div style="margin:0 auto;">
    <p>用户名:<%=name %></p>
    <p>密码:<%=pass %></p>
    <p>性别:<%=sex %></p>
    <p>爱好:<%if(hobbies!=null){for(String hobby : hobbies){
    	out.println(hobby);%>
    	<% 
    	}}else{
    		out.println("无");
    	}
    %>
    </p>
    <p>邮箱:<%=email %></p>
    </div> --%>
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <%
    	/* String userName = (String)request.getAttribute("userName"); */
    	String userName = (String)session.getAttribute("userName");
    	String userPass = (String)session.getAttribute("userPass");
    %>
    <body>
    <div style="margin:0 auto;">
    <img src="img/1.jpg" width="390px" height="150px">
    <h1 id="id">注册信息</h1>
    	<p>用户名:<%=userName %></p>
    	<p>密码:<%=userPass %></p>
    	<p><a href="out.jsp">注销</a></p>
    </div>
    </body>
    </html>
    

      

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>注销页面</title>
    </head>
    <body>
    <%
    	session.invalidate();
    	response.sendRedirect("login.jsp");
    %>
    </body>
    </html>
    

     结果示例:

      用户名或密码输入错误时:

      注册界面

      注销后返回系统界面:

  • 相关阅读:
    如何DIY陶瓷制作方法
    陶瓷的分类
    陶瓷
    机器视觉之——认知篇
    Halcon学习笔记(一)
    编程过程遇到的问题及解决方法
    前端技术——WebFont与Sprite
    HTML学习总结(四)【canvas绘图、WebGL、SVG】
    CSS3学习之——【特殊属性】
    HTML5学习总结——本地存储
  • 原文地址:https://www.cnblogs.com/chenxj/p/10834636.html
Copyright © 2011-2022 走看看