[Spring] 예제 3 - 회원가입 유효성 검사

Back-End/Spring

[Spring] 예제 3 - 회원가입 유효성 검사

09009 2023. 5. 25. 10:48

유효성 검사 : 입력된 값이 정상적인지 확인하는 작업

회원가입

경고창 띄우기

- button 태그를 input 타입으로 변경한다.

- input type으로 button을 선언하면 클릭하여도 submit이 작동되지 않는다.

✍ registerPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function checkValueAndSubmit() {
		alert("되나?");
	}
</script>
</head>
<body>
<h1>회원 가입</h1>
<form id="frm" action="./registerProcess" method="post">
	ID: <input id="userId" type="text" name="user_id"><br>
	PW: <input id="userPw" type="password" name="user_pw"><br>
	PW 확인: <input id="userPwConfirm" type="password"><br>
	nickname: <input type="text" name="nickname"><br>
	gender: 
	<input type="radio" name="gender" value="M">남
	<input type="radio" name="gender" value="F">여 <br>
	
	취미: 
	<c:forEach items="${hobbyList}" var="hobby">
		<input type="checkbox" name="hobby_id" value="${hobby.id}"> ${hobby.name}
	</c:forEach>
	
	<br>
	
	email: <input type="text" name="email"><br>
	생년월일: <input type="date" name="birth"><br>
	전화번호: <input type="text" name="phone"><br>
	<input type="button" value="회원가입" onclick="checkValueAndSubmit()">
	
</form>
<a href="./loginPage">로그인 페이지로 이동</a>
</body>
</html>

자바스크립트에서 함수가 제대로 동작되는지 테스트하고 싶을 경우

console.log를 이용하는 것이 더 바람직하다.

<script>
	function checkValueAndSubmit() {
		//alert("되나?");
		console.log("안녕하세요~!!");
		
	}
</script>

const: final

<script>
	function checkValueAndSubmit() {
		//alert("되나?");
		console.log("안녕하세요~!!");
		
		var a = 10; // ES5 이전
		let b = 20; // ES6 이전
		const c = 30; // ES6
		
		b = 40; // 가능
		c = 50; // 불가능, const는 final
		
	}
</script>

var a = 10; // ES5 이전
let b = 20; // ES6 이전
const c = 30; // ES6
		
b = 40; // 가능
c = 50; // 불가능, const는 final

자바스크립트로 submit 수행

<script>
	function checkValueAndSubmit() {
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>

console을 확인하면서 연습하기

<script>
	function checkValueAndSubmit() {
		const userIdBox = document.getElementById("userId");
		const idValue = userIdBox.value;
		
		if (idValue == "") {
			alert("아이디를 입력해주세요");
			return; // return;을 해줘야 submit이 발동되지 않는다. (주의!)
		}
		
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>

아이디에 focus가 가도록 코드 작성

<script>
	function checkValueAndSubmit() {
		const userIdBox = document.getElementById("userId");
		const idValue = userIdBox.value;
		
		if (idValue == "") {
			alert("아이디를 입력해주세요");
			userIdBox.focus();
			return; // return;을 해줘야 submit이 발동되지 않는다. (주의!)
		}
		
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>

확인 버튼을 누르면 커서가 바로 ID 입력창으로 이동한다.

비밀번호 확인 기능 추가

비밀번호와 비밀번호 확인 두 파라미터를 서버로 전송하여 서버에서 확인하는 것보다는

클라이언트에서 하는 것이 더 바람직하다.

사용자 입력 실수 방지 작업이므로 클라이언트에서 처리한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function checkValueAndSubmit() {
		const userIdBox = document.getElementById("userId");
		const idValue = userIdBox.value;
		
		if (idValue == "") {
			alert("아이디를 입력해주세요");
			userIdBox.focus();
			return; // return;을 해줘야 submit이 발동되지 않는다. (주의!)
		}
		
		const userPwBox = document.getElementById("userPw");
		const userPwConfirmBox = document.getElementById("userPwConfirm");
		
		if(userPwBox.value != userPwConfirmBox.value) {
			alert("입력한 비밀번호를 다시 확인해주세요.")
			return;
		}
		
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>
</head>
<body>
<h1>회원 가입</h1>
<form id="frm" action="./registerProcess" method="post">
	ID: <input id="userId" type="text" name="user_id"><br>
	PW: <input id="userPw" type="password" name="user_pw"><br>
	PW 확인: <input id="userPwConfirm" type="password"><br>
	nickname: <input type="text" name="nickname"><br>
	gender: 
	<input type="radio" name="gender" value="M">남
	<input type="radio" name="gender" value="F">여 <br>
	
	취미: 
	<c:forEach items="${hobbyList}" var="hobby">
		<input type="checkbox" name="hobby_id" value="${hobby.id}"> ${hobby.name}
	</c:forEach>
	
	<br>
	
	email: <input type="text" name="email"><br>
	생년월일: <input type="date" name="birth"><br>
	전화번호: <input type="text" name="phone"><br>
	<input type="button" value="회원가입" onclick="checkValueAndSubmit()">
	
</form>
<a href="./loginPage">로그인 페이지로 이동</a>
</body>
</html>

error는 console창에서 확인하고 수정하도록 한다/

비밀번호를 다르게 입력하고 회원가입 버튼을 클릭하였을 때 아래와 같이 화면이 나온다.

비밀번호 입력이 잘못되었을 때 사용자의 편의에 맞게 코드 수정

value = "";

		if(userPwBox.value != userPwConfirmBox.value) {
			alert("입력한 비밀번호를 다시 확인해주세요.")
			userPwBox.value = "";
			userPwConfirmBox.value = "";
			userPwBox.focus();
			return;
		}

개발자 도구 Tip

입력한 ID 글자 개수 제한하기

ex) 아이디는 영문자, 숫자, 대문자만 가능합니다.... 비밀번호는 몇 글자 이상이어야 합니다...

^: 시작

{4,12} : 4글자 ~ 12글자

정규표현식

양 옆에 / 붙여주어야 함.

idRegEx= 정규표현식을 수행할 object 객체

<script>
	function checkValueAndSubmit() {
		const userIdBox = document.getElementById("userId");
		const idValue = userIdBox.value;
		
		const idRegEx = /^[a-zA-Z][a-zA-Z0-9]{4,12}$/;
		
		// idValue가 정규표현식에 적합하지 않으면
		if (!idRegEx.test(idValue)) {
			alert("아이디는 영소문자로 시작해야하고 영소문자, 대문자, 숫자로만 4~12글자이어야 합니다.");
			userIdBox.focus();
			return; // return;을 해줘야 submit이 발동되지 않는다. (주의!)
		}
		
		const userPwBox = document.getElementById("userPw");
		const userPwConfirmBox = document.getElementById("userPwConfirm");
		
		if(userPwBox.value != userPwConfirmBox.value) {
			alert("입력한 비밀번호를 다시 확인해주세요.")
			userPwBox.value = "";
			userPwConfirmBox.value = "";
			userPwBox.focus();
			return;
		}
		
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>

비밀번호 정규표현식

<script>
	function checkValueAndSubmit() {
		const userIdBox = document.getElementById("userId");
		const idValue = userIdBox.value;
		
		const idRegEx = /^[a-zA-Z][a-zA-Z0-9]{4,12}$/;
		
		// idValue가 정규표현식에 적합하지 않으면
		if (!idRegEx.test(idValue)) {
			alert("아이디는 영소문자로 시작해야하고 영소문자, 대문자, 숫자로만 4~12글자이어야 합니다.");
			userIdBox.focus();
			return; // return;을 해줘야 submit이 발동되지 않는다. (주의!)
		}
		
		const userPwBox = document.getElementById("userPw");
		const userPwConfirmBox = document.getElementById("userPwConfirm");
		
		if(userPwBox.value != userPwConfirmBox.value) {
			alert("입력한 비밀번호를 다시 확인해주세요.")
			userPwBox.value = "";
			userPwConfirmBox.value = "";
			userPwBox.focus();
			return;
		}
		
		const pwRegEx = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[a-zA-Z\d!@#$%^&*()_+]{8,16}$/;
		
		if(!pwRegEx.test(userPwBox.value)){
			alert("비밀번호는.... 어쩌고 8-16 글짜.. 블라블라..");
			userPwBox.value = "";
			userPwConfirmBox.value = "";
			
			userPwBox.focus();
			return;
		}
		
		
		const frm = document.getElementById("frm");
		frm.submit();
	}
</script>