romworld

JSP 15 - 유효성 검사 (Validation), 콜백함수,핸들러 함수, focus(),select() 본문

WEB/JSP

JSP 15 - 유효성 검사 (Validation), 콜백함수,핸들러 함수, focus(),select()

inderrom 2023. 1. 5. 13:54

유효성 검사(Validation)

사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게

입력되었는지 검증하는 것

- 예) 아이디 중복검사, 로그인 인증 시 아이디와 비밀번호 검사 등

 

1. 기본 유효성 검사

  • 입력된 데이터 값의 존재 유무를 검사.데이터, 숫자 등 (입력 했니? 안했니?)

2. 데이터 형식 유효성 검사

  • 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사( 정규 표현식 = 정규식 사용)

1. 기본 유효성 검사

 

onclick="checkLogin()" 인 경우 - 자바스크립트

	function checkLogin(){
		// 폼 페이지를 J/S 객체로 할당
		let form = document.loginForm;
		if(form.id.value==""){ // 아이디 값이 없다면
			alert("아이디를 입력해주세요")
			form.id.focus();
			return false;   // 함수를 종료
		}else if(form.passwd.value==""){
			alert("비밀번호를 입력해주세요");
			form.passwd.focus();
			return false;
		}
		form.submit(); //if문 조건을 만족하면 submit
	}

 

focus()

  • input태그를 마우스로 클릭하여 입력상태로 만든 것
  • 입력 상태가 떠난 것을 포커스가 벗어 났다고 표현

 

핸들러 함수

  •  onclick 

- 이벤트가 발생 했을 때 submit을 클릭한 경우 유효성 검사를 하기 위해 매핑하는 메서드

- 자바스크립트를 이용하여 <script>태그 내에 작성한다.

 

<%@ 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>
<script>
function checkform(){
	// 아이디 값
	let id =  document.loginForm.id.value;
	let passwd = document.loginForm.passwd.value;
	console.log("아이디 : " + id + ", 비밀번호 : " + passwd);
}
</script>
<title>Validation</title>
</head>
<body>
	<!-- 폼페이지 -->
	<form name="loginForm">
		<p>아이디 : <input type="text" name="id" /></p>
		<p>비밀번호 : <input type="text" name="passwd" /></p>
			<!-- checkform() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkform()"></p>
	</form>
</body>
</html>

consol로 찍어보면 보인다

 

버튼을 클릭했을 때 - JQUERY

$(function(){
	$("input[type='button']").on("click", function(){
	// 아이디 입력란의 값을 가져옴
		let id =$("input[name='id']").val();
		let passwd = $(".passwd").val()
		
		console.log("id : " + id + ", passwd : " + passwd);
		
		if(id==""){
			alert("아이디를 입력해주세요");
			$("input[name='id']").focus();
		}else if(passwd==""){
			alert("비밀번호를 입력해주세요");
			$(".passwd").focus();
		}else{
			alert("정상입력");
			$("#loginForm").submit();
		}
	});
});

 

 

아이디, 비밀번호 유효성 검사 / 데이터

(길이 제한)

 

form태그

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

 

자바스크립트식

<script>
	function checkLogin(){
		//폼페이지가 J/S 오브젝트 변수로 할당	
		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>13){
			alert("아이디는 4-12자 이내로 입력 가능 합니다.");
			form.id.select();
			return false;
		}
		
		if(passwdLen<4){
			alert("비밀번호는 4자 이상으로 입력해야 합니다.");
			form.passwd.select();
			return;
		}
	
		form.submit();
		
	}

select()는 focus()와 같은 기능을 한다.

 

 

jquery식

$(function(){
	//button요소를 클릭하면 콜백 함수 실행
	$("button").on("click", function(){
		let id = $("#id").val();
		let idLen = id.length;
		let passwd = $(".passwd").val();
		let passwdLen = passwd.length;
		
		console.log("id : " + id + " passwd : " + passwd + "\n" 
						+"idLen : " + idLen + " passwdLen : " + passwdLen);
		
		if(idLen < 4 || idLen > 13){
			alert("아이디는 4-12자 이내로 입력 가능");
			$("#id").focus();
			return false;
		}else if(passwdLen <4){
			alert("비밀번호는 4자 이상으로 입력해야합니다");
			$("#passwd").focus();
			return
		}else{
			alert("정상입력되었습니다!")
            $("#loginForm").submit();
		}
		
	});
});

핸들러 함수를 지우고 버튼 태그를 만들어 작성함

여기서 콜백함수란?

파라미터로 함수를 전달하는 함수이다. 전달받은 함수를 함수의 내부에서 실행시킨다. 

예)jQuery에서 사용하는 콜백함수.

$("#btn_1").click( function() {

alert("Btn 1 clicked");

} );

 

-forEach함수 안에 익명의 함수를 넣어서 forEach 구문 내에서 동작

var friends = ["Hena", "Rex", "Ryan", "Paula" ] ;

friends.forEach(function (eachName, index) {

});

 

자바스크립트에서 모든것은 객체다. 심지어 함수도 객체이다. 

그래서 함수를 변수처럼, 그리고 다른 함수의 리턴값으로 사용이 가능하게 된다.

 

함수를 콜백으로 다른 함수의 인자처럼 사용 할 경우에는 오직 함수의 정의만을 넘겨주면 된다.

즉, 함수의 이름만 넘겨주면 된다. 굳이 함수라고 끝에 () 괄호를 붙여 줄 필요도 없다. 다음과 같은 형태이다


setInterval(callback, 1000)  // setInterval함수의 인자인 callback자체가 함수이다.

예제와 같이 함수의 인자로 전달된 함수의 경우에는 언제든, 원하는 시점에 실행시킬 수 있다.

중요한 것은 콜백함수는 전달받은 즉시 바로 실행될 필요가 없다는 것이다. 

함수의 이름처럼 "call back", 함수의 내부 어느 특정 시점에 실행을 한다. 

 

다중 콜백함수 

여러개의 콜백함수를 파라미터로 전달할 수 있다. ( jQuery의 ajax함수)

function successCallback(){
// do stuff before send
}
function successCallback(){
// do stuff if success message received
}
function completeCallback() {
//do stuff upon completion
}
function errorCallback(){
//do stuff of error received
}
$.ajax({
url:"http://www.bit.ly/hyesue_lee",
success:successCallback,
complete: completeCallback,
error: errorCallback
});

 

대소문자, 숫자 유효성검사

자바스크립트식

	function checkLogin(){
		let form = document.loginForm;
		let id = form.id.value;
		let idLen = id.length;
		let passwd = form.passwd.value;
		let passwdLen = passwd.length;
		
		console.log("id: " + id + " idLen : " + idLen);
		console.log("passwd: " + passwd + " passwdLen : " + passwdLen);
		
		if(form.id.value==""){ // 아이디 값이 없다면
			alert("아이디를 입력해주세요")
			form.id.focus();
			return false;   // 함수를 종료
		}else if(form.passwd.value==""){
			alert("비밀번호를 입력해주세요");
			form.passwd.focus();
			return false;
		}
		
		
		// 아이디는 영문 소문자만 입력 가능
		for(i=0;i<idLen;i++){
			//java -> 한 글자씩 끄집어내보자
			let ch = id.charAt(i);
			
			// 소문자인지 따져보자
			if((ch<'a'|| ch>'z')&&(ch>'A'||ch<'z')&&(ch>'0'||ch<'9')){
				alert("아이디는 영문 소문자만 입력 가능합니다.");
				// name="id" 인 요소에 focus를 줌(클릭한 호과)
				form.id.select();
				return; // 함수 종료
			}
		}// end for
		
		// 비밀번호는 숫자만 입력 가능합니다.
		// 숫자가 아니니?응 -> 아님
		// 숫자가 아니니? 아니 -> 숫자
		if(isNaN(passwd)){ // 응(true)
			// 숫자아님
			alert("비밀번호는 숫자만 입력 가능합니다.")
			form.passwd.select();
			return;
		}// end if
		
		form.submit();
	}// end function

영문자

	for(i=0;i<idLen;i++){
			//java -> 한 글자씩 끄집어내보자
			let ch = id.charAt(i);
			
			// 소문자인지 따져보자
			if((ch<'a'|| ch>'z')&&(ch>'A'||ch<'z')&&(ch>'0'||ch<'9')){
				alert("아이디는 영문 소문자만 입력 가능합니다.");
				// name="id" 인 요소에 focus를 줌(클릭한 호과)
				form.id.select();
				return; // 함수 종료
			}
		}// end for

 

숫자

isNaN() 함수

(is Not a Number)

- 숫자가 아니면 true

- 숫자면 false를 반환 

for(i=0;i<idLen;i++){
			//java -> 한 글자씩 끄집어내보자
			let ch = id.charAt(i);
			
			// 소문자인지 따져보자
			if((ch<'a'|| ch>'z')&&(ch>'A'||ch<'z')&&(ch>'0'||ch<'9')){
				alert("아이디는 영문 소문자만 입력 가능합니다.");
				// name="id" 인 요소에 focus를 줌(클릭한 호과)
				form.id.select();
				return; // 함수 종료
			}
		}// end for

 

 

jquery식

$("button").on("click",function(){
		let id = $("#id").val();
		let idLen = id.length;
		
		let passwd = $(".passwd").val();
		let passwdLen = passwd.length;
		
		if(id == ""){
			alert("아이디를 입력해주세요");
			$("#id").focus();
			return false;
		}else if(passwd == ""){
			alert("비밀번호를입력해주세요");
			$("#passwd").focus();
			return;
		}
	
		for(i=0; i<idLen;i++){
			let ch = id.charAt(i);
			if((ch <'a' || ch>'z')&&(ch >'A' || ch<'Z')&&(ch >'0' || ch<'9')){
				alert("아이디는 영문 소문자만 가능합니다.");
				$("#id").focus();
				return;
			}
		}
		if(isNaN(passwd)){
			alert("숫자를 입력해주세요");
			$("passwd").focus();
			return;
		}
		
		$("#loginForm").submit();
		
	});
});

'WEB > JSP' 카테고리의 다른 글

JSP 16 - 쇼핑몰 사이트 만들기(5) [상품등록 - 정규식]  (0) 2023.01.10
JSP 15 - 정규표현식 (REGULAR EXPRESSION)  (0) 2023.01.09
JSP 14 - 파일업로드  (0) 2023.01.04
JSP 13 - 쇼핑몰 사이트 만들기(4) [상품등록 (파일업로드)]  (0) 2023.01.03
JSP - 12 함수 (map(), prop())  (0) 2023.01.02
'WEB/JSP' Related Articles more
Comments