JSP-Form(유효성 검사)

임재헌·2023년 4월 5일
0

JSP

목록 보기
10/33
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07 form</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function validate() {
	//alert();
	//이름은 5~20글자 이내에서 입력
	let uname=document.getElementById("uname").value;
	uname=uname.trim();
	if(uname.length<5 || uname.length>20){
		alert("이름 5~20글자 이내에서 입력");
		 return false;
	}
	return true;
}
</script>
</head>
<body>
<h3>성적 입력</h3>
<form name="sugnjukfrm" id="sugnjukfrm" method="post" action="07_ok.jsp" onsubmit="return validate()">
	이름:<input type="text"  class="form-control" name="uname" id="uname" maxlength="20" placeholder="이름을 입력" required="required">
	<hr>
	국어:<input type="number"  class="form-control" name="kor" id="kor" size="5" min="0" max="100" >
	<hr>
	영어:<input type="number"  class="form-control" name="eng" id="eng" size="5" min="0" max="100" >
	<hr>
	수학:<input type="number"  class="form-control" name="mat" id="mat" size="5" min="0" max="100" >
	<hr>
	<input type="submit" class="btn btn-primary" value="전송">
	<input type="reset"  class="btn btn-light" value="취소">
</form>
<!--
				[form 관련 다양한 속성들]
				사용자가 입력한 정보를 서버로 전송하기 위한 양식
				name: 폼이름. 서버에서 식별하기 위한 이름
				id : 폼아이디. Frontend단에서 식별자로 주로 사용
				method: 폼 전송방식. 	get | post. 생략시 기본 get
				action: 사용자가 요청한 정보를 서버가 받아서 처리할 결과 페이지
				enctype: 폼에서 파일을 첨부해서 서버로 전송하고자 할때 "multipart/form-data"
				
				[폼 전송방식]
				1. method = get
					-생략시 기본값
					-사용자가 입력 요청한 정보가 url 그대로 노출
					-한글 안깨짐
					-ok.jsp?서버로 전송되는 값들
						형식 : 요청페이지(명령어)?변수=값&변수=값&
					- 검색어
					
				2. method = post
					-사용자가 요청한 정보가 url에 노출되지 않고 패키지화 되어서 서버로 전송
					-(TOMCAT 9.0)이하 버전 에서는 한글이 깨진다
					-주민번호, 카드번호, 비번....
					
				-->
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>07_ok</title>
</head>
<body>
<h3>성적 결과</h3>
<%
	//request 내장 객체
	//-> 사용자가 요청한 모든 정보 
	//request.getParameter(""); 메소드
	//사용자가 입력한 정보를 개별적으로 가져올때
	//	request.getParameter("uname") 사용자가 입력한 uname값 가져온다
	/* 
	out.print(request.getParameter("uname"));
	out.print("<hr>");
	out.print(request.getParameter("kor"));
	out.print("<hr>");
	out.print(request.getParameter("eng"));
	out.print("<hr>");
	out.print(request.getParameter("mat")); */
	
	//METHOD=POST 간혹 한글이 깨지는 현상이 발생 
	// 한글 인코딩
	request.setCharacterEncoding("UTF-8");//조합형
	//request.setCharacterEncoding("EUC-KR");//완성형
	
	//사용자가 입력 요청한 정보를 개별적으로 가져오기
	String uname=request.getParameter("uname").trim();
	int kor=Integer.parseInt(request.getParameter("kor").trim());
	int eng=Integer.parseInt(request.getParameter("eng").trim());
	int mat=Integer.parseInt(request.getParameter("mat").trim());
	int aver=(kor+eng+mat)/3;
	
%>
<!--성적 결과 테이블 출력  -->
<table class="table">
<tr>
<th>이름</th>
<td><%=uname%></td>
</tr>

<tr>
<th>국어</th>
<td><%=kor%></td>
</tr>

<tr class="success">
<th>영어</th>
<td><%=eng%></td>
</tr>

<tr>
<th>수학</th>
<td><%=mat%></td>
</tr>
<tr>
<th class="active">평균</th>
<td><%=aver%></td>
</tr>
</table>
</body>
</html>

profile
임재헌
이전 포스트

JSP-내장객체

다음 포스트

JSP-계산기 연습

0개의 댓글