JSP 유효성검사 (validation) 2 글자수 유효성 검사

JSP

JSP 유효성검사 (validation) 2 글자수 유효성 검사

9400 2023. 1. 6. 11:20

자바스크립트를 이용한 폼 글자수 유효성 검사

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script></script>
<title>Validation03</title>
<script type="text/javascript">
 function checkLogin(){
	 //폼페이지가 js오브젝트 변수로 할당
	 let form = document.loginForm;
	 //아이디 입력값의 길이
	 let idLen = form.id.value.length;
	 //비밀번호 입력값의 길이
	 let passwdLen = form.passwd.value.length;
	 
	 console.log("idLen : "+idLen+", passwdLen: "+passwdLen);
	 
	 if(idLen<4 || idLen>12){
		 alert("아이디는 4-12글자 이내로 입력 가능합니다.");
		 form.id.select();
		 return false;
	 }
	 
	 //비밀번호는 4자 이상으로
	 if(passwdLen<4){
		 alert("비밀번호는 4자 이상으로 입력해야 합니다.");
		 //.focus() : 클릭
		 form.passwd.focus();
		 return;
		 //return == return false;
	 }
	 //조건문을 무사히 통과했다면 submit하자 
	 form.submit();
 }

</script>
</head>
<body>
	<!-- 기본 유효성 검사 >>> 데이터 길이 확인 
	  	 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사
	-->

	<form name="loginForm" action="validation03_process.jsp"
		  method="post" id="loginForm">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="text" name="passwd" class="cls passwd"/></p>
		<!-- checkForm() : 핸들러 함수 -->
 		<p><input type="button" value="전송(핸들러)" onclick="checkLogin()"/></p>
	</form>

</body>
</html>

제이쿼리를 이용한 폼 글자수 유효성 검사

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>Validation03</title>
<script type="text/javascript">

//document.ready() 와 같은 의미 = $(function({}))
$(function(){
	
	$('button').on('click',function(){
	let id = $('#id').val();
	let idLen = id.length;
	console.log("id : "+id+", idLen : "+idLen);
	
	let passwd = $("#passwd").val();
	let passwdLen = passwd.length;
	console.log("passwd : "+passwd+", passwdLen : "+passwdLen);	
	
	 if(idLen<4 || idLen>12){
		 alert("아이디는 4-12글자 이내로 입력 가능합니다.");
		 $('#id').focus();
		 return false;
	 }
	 
	 //비밀번호는 4자 이상으로
	 if(passwdLen<4){
		 alert("비밀번호는 4자 이상으로 입력해야 합니다.");
		 //.focus() : 클릭
		 $('#passwd').focus();
		 return;
		 //return == return false;
	 }
	 //조건문을 무사히 통과했다면 submit하자 
	 $('#loginForm').submit();
	})
	
});

</script>
</head>
<body>
	<!-- 기본 유효성 검사 >>> 데이터 길이 확인 
	  	 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사
	-->

	<form name="loginForm" action="validation03_process.jsp"
		  method="post" id="loginForm">
		<p>아이디 : <input type="text" name="id" id="id"/></p>
		<p>비밀번호 : <input type="text" name="passwd" id="passwd" class="cls passwd"/></p>
		<!-- checkForm() : 핸들러 함수 -->
 		<p><button type="button" >전송</button></p>
	</form>

</body>
</html>

처리 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<% //스크립틀릿
	request.setCharacterEncoding("utf-8");
	
	String id = request.getParameter("id");
	String passwd = request.getParameter("passwd");
	%>
	<p>아이디 : <%= id%></p>
	<p>비밀번호 : <%= passwd%></p>
</body>
</html>

유효성검사에 통과하지 못할시 ->

유효성 검사 통과 성공 ->