[JSP] Ch08 유효성 검사 / 데이터 유무, 길이, 숫자 여부, 정규표현식

jychae·2022년 11월 4일

JSP

목록 보기

5/9

validation01.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$(function() {
	var submitBtn = $("#submitBtn");
	var LoginForm2 =$("#LoginForm2");
	
    
	// 방법1----------------------------------------------------------
	// submitBtn.on("click", CheckFormToJquery) 
    // => Jquery 버전 폼에 적어야함! 현재 제거!
	
    
	// 방법2----------------------------------------------------------
	// 	submitBtn.on("click", function (event) {
	// 		event.preventDefault();
	// 		console.log("click 이벤트 발생[방법2]");
	// 		alert("아이디 : " + $("#id").val() + "\n" +
	// 				  "비밀번호 : " + $("#pw").val());
	// 	});
    
    
	// 방법3----------------------------------------------------------
	LoginForm2.submit(function(event) {
		event.preventDefault();
 		console.log("click 이벤트 발생[방법3]");
 		alert("아이디 : " + $("#id").val() + "\n" +
 				  "비밀번호 : " + $("#pw").val());
 	});
	
	
	function CheckFormToJquery() {
		alert("아이디 : " + $("#id").val() + "\n" +
			  "비밀번호 : " + $("#pw").val());
	}
});

function CheckForm() {
	alert("아이디 : " + document.LoginForm.id.value + "\n" +
		  "비밀번호 : " + document.LoginForm.pw.value);
}
</script>

<body>
	<p>Javascript 버전</p>
	<form action="" name="LoginForm">
		<p>아이디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="text" name="pw"/></p>
		<p><input type="submit" value="전송" onclick="CheckForm()"/></p>
	</form>
<hr/>
	<p>Jquery 버전</p>
	<form action="" name="LoginForm2" id="LoginForm2">
		<p>아이디 : <input type="text" name="id" id="id"/></p>
		<p>비밀번호 : <input type="text" name="pw" id="pw"/></p>
		<p><input type="submit" value="전송" id="submitBtn" /></p>
	</form>
</body>
</html>

validation02.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var loginBtn = $("#loginBtn");
	
	loginBtn.on("click", function() {
		var id = $("#id2").val();
		var pw = $("#pw2").val();
		
		if(id == null || id == ""){
			alert("아이디를 입력하세요");
			$("#id2").focus();
			return false;
		}
		
		if(pw == null || pw == ""){
			alert("비밀번호를 입력하세요");
			$("#pw2").focus();
			return false;
		}
		 
		$("#LoginForm2").submit();
	});
	
});


function checkLogin() {
	var form = document.loginForm;
	
	// 아이디가 입력되었는지 검사한다.
	// 아이디가 입력되지 않으면 오류 메세지를 출력하고 해당 입력 항목에 커서가 놓인다.
	if(form.id.value == ""){
		alert("아이디를 입력해주세요");
		form.id.focus();
		return false;
		
	// 비밀번호가 입력되었는지 검사한다.
	// 비밀번호가 입력되지 않으면 오류 메세지를 출력하고 해당 입력 항목에 커서가 놓인다.
	}else if(form.pw.value == ""){
		alert("비밀번호를 입력해주세요");
		form.pw.focus();
		return false;
	}
	
	// 폼 페이지에서 입력한 데이터 값을 서버로 전송합니다.
	form.submit();
}
</script>
<body>
	<p>Javascript 버전</p>
	<form action="validation02_process.jsp" name="loginForm" method="post">
		<p>아이디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="text" name="pw"/></p>
		<p><input type="button" value="전송" onclick="checkLogin()"/></p>
	</form>

	<p>Jquery 버전</p>
	<form action="validation02_process.jsp" name="loginForm2" id="LoginForm2">
		<p>아이디 : <input type="text" name="id2" id="id2"/></p>
		<p>비밀번호 : <input type="text" name="pw2" id="pw2"/></p>
		<p><input type="button" value="전송" id="loginBtn" /></p>
	</form>
</body>
</html>

validation02_process.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>
	<%
		request.setCharacterEncoding("UTF-8");
		
		// 자바스크립트 폼에서 넘어온 데이터
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		// 제이쿼리 폼에서 넘어온 데이터
		String id2 = request.getParameter("id2");
		String pw2 = request.getParameter("pw2");
		
	%>
	
	<p>Javascript Value</p>
	<p>아이디 : <%=id %></p>
	<p>비밀번호 : <%=pw %></p>
	<br/>
	
	<p>Jquery Value</p>
	<p>아이디 : <%=id2 %></p>
	<p>비밀번호 : <%=pw2 %></p>
</body>
</html>

validation03.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var loginBtn = $("#loginBtn");
	
	loginBtn.on("click", function() {
		var id = $("#id2").val();
		var pw = $("input[name=pw2]").val();
		
		if(id.length < 4 || id2.length > 12){
			alert("아이디는 4~12자 이내로 입력 가능합니다.");
			$("#id2").select();
			return;
		}
		
		if(pw.length < 4){
			alert("비밀번호는 4자 이상으로 입력 가능합니다.");
			$("#pw2").select();
			return;
		}
		
		$("#loginForm2").submit();
	})
});


function checkLogin() {
	var form = document.loginForm;
	
	if(form.id.value.length < 4 || form.id.value.length > 12 ){
		alert("아이디는 4~12자 이내로 입력 가능합니다.");
		form.id.select();
		return;
	}
	
	if(form.pw.value.length < 4){
		alert("비밀번호는 4자 이상으로 입력 가능합니다.");
		form.pw.select();
		return;
		
	}
	form.submit();
}

</script>
<body>

	<p>Javascript 버전</p>
	<form action="validation03_process.jsp" name="loginForm" method="post">
		<p>아이디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="text" name="pw"/></p>
		<p><input type="button" value="전송" onclick="checkLogin()"/></p>
	</form>

	<p>Jquery 버전</p>
	<form action="validation03_process.jsp" name="loginForm2" id="loginForm2">
		<p>아이디 : <input type="text" name="id2" id="id2"/></p>
		<p>비밀번호 : <input type="text" name="pw2" id="pw2"/></p>
		<p><input type="button" value="전송" id="loginBtn" /></p>
	</form>

</body>
</html>

validation03_process.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>
	<%
		request.setCharacterEncoding("UTF-8");
		
		// 자바스크립트 폼에서 넘어온 데이터
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		// 제이쿼리 폼에서 넘어온 데이터
		String id2 = request.getParameter("id2");
		String pw2 = request.getParameter("pw2");
		
	%>
	
	<p>Javascript Value</p>
	<p>아이디 : <%=id %></p>
	<p>비밀번호 : <%=pw %></p>
	<br/>
	
	<p>Jquery Value</p>
	<p>아이디 : <%=id2 %></p>
	<p>비밀번호 : <%=pw2 %></p>
</body>
</html>

validation04.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function checkLogin() {
	var form = document.loginForm;
	
	if(form.id.value.length > 0){
		for(i = 0; i < form.id.value.length; i++){
			// 내가 만약에  adminid라고 입력하면
			// a d m i n i d 로 하나씩 쪼개서 ch에 담긴다
			var ch = form.id.value.charAt(i);
			
			if((ch < 'a' || ch > 'z') && (ch > 'A' || ch < 'Z') &&(ch > '0' || ch < '9')){
				alert("아이디는 영문 소문자로만 입력가능");
				form.id.select();
				return;
			}
		}
	}else{ // 입력한 아이디 없는 경우
		alert("아이디를 입력해주세요");
		form.id.select();
		return;
	}
	
	// 비밀번호 유효성 검사
	if(isNaN(form.pw.value)){ 
		alert("비번은 숫자로만 입력가능");
		form.pw.select();
		return;
	
	}
	
	form.submit();
}

</script>
</head>


<body>
	<p>Javascript 버전</p>
	<form action="validation03_process.jsp" name="loginForm" method="post">
		<p>아이디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="text" name="pw"/></p>
		<p><input type="button" value="전송" onclick="checkLogin()"/></p>
	</form>
	<hr/>
	<p>Jquery 버전</p>
	<form action="validation03_process.jsp" name="loginForm2" id="loginForm2">
		<p>아이디 : <input type="text" name="id2" id="id2"/></p>
		<p>비밀번호 : <input type="text" name="pw2" id="pw2"/></p>
		<p><input type="button" value="전송" id="loginBtn" /></p>
	</form>
</body>
</html>

validation05.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function checkMember() {
   //영문 대문자와 소문자, 한글, 한글의 자음과 모음 검사하도록 정규 표현식 작성
   var regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
   //이름에 대해 한글만 검사하도록 정규 표현식 작성
   var regExpName = /^[가-힣]*$/;
   //숫자만 검사하도록 정규 표현식 작성
   var regExpw = /^[0-9]*$/;
   //전화번호 형태인지 검사하도록 정규 표현식 작성
   var regExPhone = /^\d{3}-\d{3,4}-\d{4}$/;
   //이메일 형태인지 검사하도록 정규 표현식 작성
   //처음 시작이 숫자, 영소문자이고 특수문자 -_\. 나올수도 있고 안나올수도 있고
   //그다음에 숫자, 영소문자가 0개 이상이 나온다. 그리고 @가 나옴
   //\:은 특수문자 .을 표현하기 위해 이스케이프로.이 반드시 나와야하고 영소문자 2~3자리가 끝에 나온다.
   var regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[-_\.]?[0-9a-zA-Z]*\.[a-zA-Z]{2,3}$/i;

   var form = document.Member;
   
   var id = form.id.value;
   var name = form.name.value;
   var pw = form.pw.value;
   var phone = form.phone1.value + "-" +form.phone2.value + "-" +form.phone3.value ;
   var email = form.email.value;
   
   if(!regExpId.test(id)){
      console.log(regExpId.test(id)); //내가 입력한 아이디 검증 결과
      alert("아이디는 문자로 시작해 주세요!");
      form.id.select();
      return;
      
   }
   
   if(!regExpName.test(name)){
      console.log(regExpName.test(name));
      alert("이름은 한글만으로 입력해주세요!");
      form.name.select();
      return;
   }
   
   if(!regExpw.test(pw)){
      console.log(regExpw.test(pw));
      alert("비밀번호는 숫자만으로 입력해주세요");
      form.pw.select();
      return;
   }
   
   
   if(!regExPhone.test(콜)){
      console.log(regExPhone.test(콜));
      alert("연락처 입력을 확인해주세요!");
      form.phone.select();
      return;
   }
   if(!regExpEmail.test(email)){
      console.log(regExpEmail.test(email));
      alert("이메일 입력을 확인해주세요!");
      form.email.select();
      return;
   }

}
</script>


<body>
   <h3>회원가입</h3>
   <form action="validation05_process.jsp" method="post" name="Member">
      <p>아이디 : <input type="text" name="id"></p>
      <p>비밀번호 : <input type="text" name="pw"></p>
      <p>이름: <input type="text" name="name"></p>
      <p>
         연락처 : 
         <select name="phone1">
            <option value="010">010</option>         
            <option value="011">011</option>         
            <option value="016">016</option>         
            <option value="017">017</option>         
            <option value="019">019</option>         
         </select>
         <input type="text" maxlength="4" size="4" name="phone2"/>
         <input type="text" maxlength="4" size="4" name="phone3"/>
      </p>
      <p>이메일: <input type="text" name="email"></p>
      <p><input type="button" value="가입하기 " onclick="checkMember()" /></p>
      
   </form>
</body>
</html>

validation05_process.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>
	<%
		request.setCharacterEncoding("UTF-8");
	%>
	<p>아이디 : <%=request.getParameter("id") %></p>
	<p>비밀번호 : <%=request.getParameter("pw") %></p>
	<p>이름 : <%=request.getParameter("name") %></p>
	<p>연락처 : <%=request.getParameter("phone1") %> - <%=request.getParameter("phone2") %> - <%=request.getParameter("phone3") %></p>
	<p>이메일 : <%=request.getParameter("email") %></p>

	
</body>
</html>

jychae

안녕하세요! 초보개발자 공부 시작!

이전 포스트

[JSP] Ch07 file upload 파일업로드 totaltest

다음 포스트

[JSP] Ch08 유효성 검사 / 데이터 유무, 길이, 숫자 여부, 정규표현식

JSP

validation01.jsp

validation02.jsp

validation02_process.jsp

validation03.jsp

validation03_process.jsp

validation04.jsp

validation05.jsp

validation05_process.jsp

[JSP] Ch07 file upload 파일업로드 totaltest

[JSP] Ch08 유효성 검사 / 정규표현식

0개의 댓글