[jsp] 자바스크립트 form태그 name, id로 값 가져오기, validation check

seulki·2022년 10월 13일

목록 보기

28/51

🎈 jsp

<%@ 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>
</head>
<body>
	<h3>회원가입 폼</h3>
	<form action="join.jsp" method="post" id="joinForm">
		아이디 	 : <input type="text" name="userid" id="userid"></br>
		비밀번호 	 : <input type="password" name="userpw" id="userpw"></br>
		이름 		 : <input type="text" name="username" id="username"></br>
		휴대폰 번호 : <input type="text" name="userphone" id="userphone"></br>
		</br>
		<input type="button" value="회원가입" onclick="sendit()">
	</form>
	
	<script type="text/javascript">
	
		function sendit() {
			
		//id로 접근
		let joinForm = document.getElementById("joinForm");
		//name으로 접근
		let idTag = joinForm.userid;
		let pwTag = joinForm.userpw;
		let nameTag = joinForm.username;
		let phoneTag = document.getElementById("userphone");
		
		if(idTag.value == null || idTag.value == ""){
			alert("아이디를 입력하세요");
			idTag.focus();
			return false;
		}
		
		if(pwTag.value == null || pwTag.value == ""){
			alert("비밀번호를 입력하세요");
			pwTag.focus();
			return false;
		}
		
		if(pwTag.value.length <= 8){
			alert("비밀번호를 8자리 이상 입력하세요");
			pwTag.focus();
			return false;
		}
		
		if(nameTag.value == null || nameTag.value == ""){
			alert("이름을 입력하세요");
			nameTag.focus();
			return false;
		}
		
		if(phoneTag.value == null ||phoneTag.value == ""){
			alert("핸드폰번호를 입력하세요");
			phoneTag.focus();
			return false;
		}
		joinForm.submit();
		}
	</script>
</body>
</html>