게시판 만들기 2 - 유효성 검사 — 으니의 개발 공부용 블로그

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="root" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>미니 프로젝트</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 상단 메뉴 부분 -->
	<c:import url="/WEB-INF/views/include/menu.jsp" />

	<div class="container" style="margin-top: 100px">
		<div class="row">
			<div class="col-sm-3"></div>
			<div class="col-sm-6">
				<div class="card shadow">
					<div class="card-body">
						
						    <form:form action="${root }/user/join_pro" modelAttribute="joinUser">
							<div class="form-group">
								<form:label path="name">이름</form:label> 
								<form:input path="name" class="form-control" />
								<form:errors path="name"/>
							</div>
							<div class="form-group">
								<form:label path="user_id">아이디</form:label>
								<div class="input-group">
									<form:input path="user_id" class="form-control" />
									<div class="input-group-append">
										<button type="button" class="btn btn-primary">중복확인</button>
									</div>
								</div>
								<form:errors path="user_id"/>
							</div>
							<div class="form-group">
								<form:label path="user_pw">비밀번호</form:label> 
								<form:input type="password" path="user_pw" class="form-control" />
								<form:errors path="user_pw"/>
							</div>
							<div class="form-group">
								<form:label path="user_pw2">비밀번호 확인</form:label> 
								<form:input type="password"  path="user_pw2" class="form-control" />
								<form:errors path="user_pw2"/>
							</div>
							<div class="form-group">
								<div class="text-right">
									<button type="submit" class="btn btn-primary">회원가입</button>
								</div>
							</div>
						</form:form>
					</div>
				</div>
			</div>
			<div class="col-sm-3"></div>
		</div>
	</div>


	<!-- 하단 메뉴 부분 -->
	<c:import url="/WEB-INF/views/include/footer.jsp" />

</body>
</html>

UserVO 에서

user_pw2 생성

package com.demo.domain;

public class UserVO {
	
//	-- 사용자 테이블 
//	create table user(
//		user_idx int AUTO_INCREMENT,
//	    name varchar(50) not null,
//	    user_id varchar(100) not null,
//	    user_pw varchar(100) not null,
//	    primary key(user_idx)
//	);
//

	private int user_idx;
	private String name;
	private String user_id;
	private String user_pw;
	private String user_pw2;
	
	//게터 세터 생성
	public int getUser_idx() {
		return user_idx;
	}
	public void setUser_idx(int user_idx) {
		this.user_idx = user_idx;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getUser_pw2() {
		return user_pw2;
	}
	public void setUser_pw2(String user_pw2) {
		this.user_pw2 = user_pw2;
	}
	public String getUser_id() {
		return user_id;
	}
	public void setUser_id(String user_id) {
		this.user_id = user_id;
	}
	public String getUser_pw() {
		return user_pw;
	}
	public void setUser_pw(String user_pw) {
		this.user_pw = user_pw;
	}

	
}

form:form는 modelAttribute 를 이용해 데이터를 내려줌

UserController에 join 수정

	@GetMapping("/join")
	public String join(@ModelAttribute("joinUser") UserVO joinUser) {
		return "user/join";
	}

모델에 객체 바로 담아줌 Model model 이랑 동일한 기능

modelAttribute

https://offbyone.tistory.com/325

스프링프레임워크 <form:form> 태그 사용법

스프링프레임워크의 JSP 기술중에 form taglib 가 있습니다. form 태그라이브러리를 사용하면 HTML 폼에 데이터를 바인딩하거나 에러메세지 처리등을 간편하게 할 수 있습니다. 스프링프레임워크 form

offbyone.tistory.com

유효성 검사를 위해서

pom.xml에 라이브러리 추가(데이터베이스 라이브러리 추가한 줄 바로 밑에 )

		<!-- 유효성 검사 : validation-api -->
		<dependency>
			<groupId>javax.validation</groupId>
			<artifactId>validation-api</artifactId>
			<version>2.0.1.Final</version>
		</dependency>

		<!-- 유효성 검사 : hibernate-validator -->
		<dependency>
			<groupId>org.hibernate.validator</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>6.2.0.Final</version>
		</dependency>

UserVO에서 바로 검사 항목 지정가능함

public class UserVO {
	
//	-- 사용자 테이블 
//	create table user(
//		user_idx int AUTO_INCREMENT,
//	    name varchar(50) not null,
//	    user_id varchar(100) not null,
//	    user_pw varchar(100) not null,
//	    primary key(user_idx)
//	);
//

	private int user_idx;
	
	//유효성 검사 조건 추가
	
	@Size(min=2, max=4 , message = "이름은 2~4자로 입력해주세요")
//	@Pattern(regexp ="[가-힣]*")
	private String name;
	
	@Size(min=4, max=20,  message = "아이디는 4자이상 20자이하 영문 숫자")
	private String user_id;
	
	
	@Size(min=4, max=20 , message = "패스워드는 4자이상 20자이하 영문 숫자")
	private String user_pw;
	
	
	@Size(min=4, max=20 , message = "패스워드는 4자이상 20자이하 영문 숫자")
	private String user_pw2;

UserController 에 추가

	@PostMapping("/join_pro")
	public String join_pro(@Valid @ModelAttribute("joinUser") UserVO joinUser,BindingResult result) {
		if(result.hasErrors()) {
			return "user/join";
		}
		return "user/join_success";
	}

@Valid가 유효성검사를 함

오류가 발생하면 에러가 BindingResult 에 들어가게됨

조건문으로 만약 에러가 난다면 join페이지로 다시 돌아가며 에러메세지(VO에서 지정)도 같이 반환됨

에러 메세지에 색상을 넣고싶으면

현재는 문자열 길이에만 유효성 검사가 적용된 상태이고,

한글인지 영어인지도 체크 가능하도록

UserVO수정

	@Size(min=2, max=4 , message = "이름은 2~4자로 입력해주세요")
	@Pattern(regexp="[가-힣]*",message = "한글로 입력해주세요.")
	private String name;

테스트하기

	private int user_idx;
	
	//유효성 검사 조건 추가
	
	@Size(min=2, max=4 , message = "이름은 2~4자로 입력해주세요")
	@Pattern(regexp="[가-힣]*",message = "한글로 입력해주세요.")
	private String name;
	
	@Size(min=4, max=20,  message = "아이디는 4자이상 20자이하 영문 숫자")
	@Pattern(regexp="[a-zA-Z0-0]*",message = "영문 또는 숫자로 입력해주세요.")
	private String user_id;
	
	
	@Size(min=4, max=20 , message = "패스워드는 4자이상 20자이하 영문 숫자")
	@Pattern(regexp="[a-zA-Z0-0]*",message = "영문 또는 숫자로 입력해주세요.")
	private String user_pw;
	
	
	@Size(min=4, max=20 , message = "패스워드는 4자이상 20자이하 영문 숫자")
	@Pattern(regexp="[a-zA-Z0-0]*",message = "영문 또는 숫자로 입력해주세요.")
	private String user_pw2;

regular expression (정규 표현식)

https://www.nextree.co.kr/p4327/

정규표현식(Regular Expression)을 소개합니다.

날이 갈수록 개인정보 보호에 관련하여 보안정책을 점진적으로 강화하고 있습니다. 이에 따라 Web에서 회원가입 시 Password 설정을 복잡해진 보안정책에 맞추다 보니 복잡하게 조합해야만 정상적

www.nextree.co.kr

제대로 입력했으면(join_success.jsp)로 이동이나

현재는 만들지 않아서404에러 발생

그리고 비밀번호 1과 비밀번호 2가 동일하지 않으면 오류가 나게 코드를 수정한다

UserController.

	@PostMapping("/join_pro")
	public String join_pro(@Valid @ModelAttribute("joinUser") UserVO joinUser,
			BindingResult result , Model model) {
		if(result.hasErrors()) {
			return "user/join";
		}
		if(!joinUser.getUser_pw().equals(joinUser.getUser_pw2())) {
			model.addAttribute("msg", "비밀번호가 같지 않습니다.!");
			return "user/join";
		}
		return "user/join_success";
	}

join.jsp 에 에러 메세지 출력

'BACKEND > Spring' 카테고리의 다른 글

게시판 만들기 2 - 로그인 처리 (0)	2023.10.30
게시판 만들기 2 - 아이디 중복 검사 (0)	2023.10.27
게시판 만들기 2- VO생성 및 MyBatis 설정 , 인터셉터 설정 (0)	2023.10.26
게시판 만들기 2 - 테이블 만들기(DB) (0)	2023.10.26
게시판 만들기 2 - BoardController, board(read,modify,write,delete.jsp)페이지 생성 (0)	2023.10.26

'BACKEND > Spring' 카테고리의 다른 글

티스토리툴바