티스토리 뷰

코딩/JSP

[10주 1일차] 유효성 검사

ehzim 2023. 12. 11. 23:26

CHAPTER08. 유효성 검사: 상품 등록 데이터의 유효성 검사하기

 

 

1. 유효성 검사의 개요

유효성 검사는 사용자가 ㅣ폼에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입려되었는지 검증하는 것이다.

 

 

 

 

* 유효성 검사가 필요한 이유와 검사 항목

 

유효성 검사가 필요한 이유는 보안 공격, 잘못된 데이터, 사용자의 실수로 예상 가능한 오류 등을 방지할 수 있기 때문이다.

유효성 검사 기능을 이용하면 다양한 사용자가 폼 데이터를 입력해도 폼 페이지의 동일한 입력 양식과 형태를 유지할 수 있다.

 

- 입력 데이터가 null인지 확인하는 유효성 검사 (required)

- 날짜나 이메일을 입력할 때 형식에 맞는지 확인하는 유효성 검사 (html)

- 나이를 입력할 때 숫자인지 확인하는 유효성 검사 (number)

- 로그인 인증 시 아이디와 비밀번호를 확인하는 유효성 검사 (X 다르게 함)

- 회원 가입 시 아이디 중복 여부를 확인하는 유효성 검사 (X다르게 함 서버에서 자바코드로 작성)

 

 

 

 

 

 

1.1 유효성 검사를 위한 핸들러 함수

 

핸들러 함수는 폼 페이지에서 이벤트가 발생했을 때 (submit을 클릭했을 때) 의 유효성 검사를 위해 매핑하는 메소드로, 자바 스크립트를 이용하여 유효성 검사를 위한 코드를 작성한다.

JS는 웹 브라우저에서 유효성 검사를 처리하므로 서버에서 처리하는 것보다 속도가 빠르고 서버에 과부하를 주지 않는다.

 

* webpage는 출력을 위한 것

* 작성 순서 

① boxing ② 돔트리 ③ html     //HTML 

④ 셀렉트(셀렉이 잘되었는지 확인하기 위해 border/background-color) ⑤ 배치 ⑥ 꾸미기    //CSS

⑦ JS셀렉 ⑧ 이벤트 연결(1.html에 연결 2.JS에 연결(addEventListener))    //JS

 

 

 

 

* form 태그의 id 속성을 이용하여 핸들러 함수로 폼 입력 데이터 값을 가져오는 다른 방법

: form 태그가 <form id = "loginForm"> 일 경우 다음과 같이 접근

 

var form = document.getElementsTageName("form")[0];
var form = document.getElementById("loginForm");

 

 

 

 

 

 

폼페이지에 입력한 아이디와 비밀번호 출력하기

예제 8-1

<%@ 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 type="text/javascript">
	function checkform(){
		alert("아이디 : " + document.loginForm.id.value +"\n"+
				"비밀번호 : " +document.loginForm.passwd.value);
	}
</script>
<body>
	<form name="loginForm">
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="submit" value="전송" onclick="checkform()">
	</form>
</body>
</html>

 

 

 

1.2 유효성 검사 처리 방법

사용자가 폼 페이지에 입력한 데이터 값이 서버로 전송되기 전에 웹 브라우저에서 검증하는 방법으로는 기본 유효성 검사와 데이터 형식 유효성 검사가 있다.

 

유효성 검사 설명
기본 유효성 검사 폼 페이지에 입력된 데이터 값의 존재 유무를 검사한다.
데이터 형식 유효성 검사 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하며 정규 표현식을 사용한다.

 

 

 

 

 

 

 

 

2. 기본 유효성 검사

기본 유효성 검사는 사용자가 폼 페이지의 입ㄹ겨 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사한다.

 

 

 

2.1 데이터 유무 확인하기

데이터 값의 유무에 대한 검사는 입력된 데이터 값이 없으면 오류 메시지를 출력한다.

아래는 입력 데이터의 유무를 검사하는 형식이다.

documetn.폼 이름.입력양식 이름.value==""

 

 

 

폼 페이지에 입력한 데이터(아이디와 비밀번호) 값의 유무 검사하기

예제 8-2

 

validation02

<%@ 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 type="text/javascript">
	function checkLogin(){
		var 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();
	}
</script>	
<body>
	<form name="loginForm" action="validation02_process.jsp" method="post" >
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="button" value="전송" onclick="checkLogin()">
	</form>
</body>
</html>

 

 

validation02_process

<%@ 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 passwd = request.getParameter("passwd");
	%>
	<p> 아이디 : <%=id %>
	<p> 비밀번호 : <%=passwd %>
</body>
</html>

 

 

 

 

2.2 데이터 길이 확인하기

데이터 길이에 대한 검사는 입력 데이터의 제한 길이를 검사하는 것이다.

document.폼 이름.입력양식 이름.value.length

* var a에 담아 변수처리하여 사용을 편리하게 할 수 있다.

* html 안에 input 안의 value의 길이를 구하는 것

 

 

 

 

폼 페이지에 입력한 데이터(아이디와 비밀번호) 값의 길이 검사하기

예제 8-3

 

validation03

<%@ 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 type="text/javascript">
	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.passwd.value.length<4){
			alert("비밀번호는 4자 이상으로 입력해야 합니다!");
			form.passwd.select();
			return;
		}
		form.submit();
	}
</script>
<body>
	<form name="loginForm" action="validation03_process.jsp" method="post">
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="button" value="전송" onclick="checkLogin()">
	</form>
</body>
</html>

 

validation03_process

<%@ 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 passwd = request.getParameter("passwd");
	%>
	<p> 아이디 : <%=id %>
	<p> 비밀번호 : <%=passwd %>
</body>
</html>

 

결과

 

2.3 숫자 여부 확인하기

입력받은 데이터에 숫자가 존재하는지 숫자 여부를 확인하기 위해서는 isNaN() 함수를 활용한다.

isNaN는 isNotaNumber의 약자이므로 함수의 인자 값이 숫자이면 false를 반환하고 숫자가 아니면 true를 반환한다.

 

 

* 조건에 맞지 않는 키 입력을 방지하는 방법은 onkeypress 속성으로 핸들러 함수를 설정할 수 있다.

onkeypress는 키 입력 할 때 마다 함수 실행을 하여 유효성 검사를 할 수 있다.

 

 

 

 

 

폼 페이지에 입력한 비밀번호 값이 숫자인지 검사하기

예제 8-4

 

validation04

<%@ 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 type="text/javascript">
	function checkLogin(){
		var form = document.loginForm;
		
		for(i=0; i<form.id.value.length; i++){
			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;
			}
		}
		if (isNaN(form.passwd.value)){
			alert("비밀번호는 숫자만 입력 가능합니다!");
			form.passwd.select();
			return;
		}
		form.submit();
	}
</script>
<body>
	<form name="loginForm" action="validation04_process.jsp" method="post">
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="button" value="전송" onclick="checkLogin()">
	</form>	
</body>
</html>

 

validation04_process

<%@ 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 passwd = request.getParameter("passwd");
	%>
	<p> 아이디 : <%=id %>
	<p> 비밀번호 : <%=passwd %>
</body>
</html>

 

결과

 

 

 

 

 

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

 

데이터 형식 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법이다.

(기본 유효성 검사보다 복잡하다.)

 

 

 

 

3.1 정규 표현식 사용하기

정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.

문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한다.

두 가지 형식을 가지는데 둘 중 하나를 사용할 수 있다.

 

첫번째 객체 초기화를 사용하는 방법 (상수 형태일 때 주로 사용)

var 변수 이름 = /정규 표현식/[Flag];

 

 

두번째 RegExp 객체를 이용하는 방법 (정규 표현식이 자주 변경될 때 주로 사용)

var 변수 이름 = new RegExp('정규 표현식',['Flag']);

 

 

 

 

* Flag는 정규 표현식의 끝인 / 다음에 오는 문자열 (생략 가능)

Flag 설명
i Ignore Case:문자열의 대문자와 소문자를 구별하지 않고 검출한다.
g Global:문자열 내의 모든 패턴을 검출한다.
m Multi Line:문자열에 줄 바꿈 행이 있는지 검출한다.

 

 

 

 

* 정규 표현식의 메소드 종류

메소드 섦여
test() 매개변수 값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false를 반환한다.
exec() 매개변수 값으로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환한다.

 

 

 

 

 

3.2 정규 표현식의 표현 방법

정규 표현식에서 사용하는 기호를 메타 문자라고 한다.

메타 문자는 정규 표현식 내부에서 특정한 의미를 가진 문자이다.

 

 

* 기본 메타 문자의 종류

메타문자 설명
^x 문자열이  x로 시작된다.
x$ 문자열이 x로 종료된다.
.x 임의의 한 문자를 표현한다.(문자열이 x로 끝남)
x+ x가 한번 이상 반복된다.
x? x가 존재하거나 존재하지 않는다.
x* x가 0번이상 반복된다.
x|y x 또는 y를 찾는다. (or 연산 의미)
( x ) () 안의 내용을 캡처하고 그룹화한다.
( x )( y ) 그룹화 할 떄 자동으로 앞에서부터 그룹 번호를 부여해서 캡처한다. 결과 값 배열에 캡처하지 않은 그룹은 들어가지 않는다.
( x )(?:y ) 캡처하지 않은 그룹을 생성할 경우 ?:를 사용한다. 결과 값 배열에 캡처하지 않은 그룹은 들어가지 않는다.
x{n} x를 n번 반복한 문자를 찾는다.
x{n,} x를 n번 이상 반복한 문자를 찾는다.
x{n,m} x를 n번 이상 m번 이하 반복한 문자를 찾는다.

 

 

 

 

메타 문자 중 [] 문자 클래스는 독특한 성질을 가진다.

[]는 내부에 해당하는 문자열의 범위 중 한 문자만 선택한다는 것을 의미한다.

문자 클래스 내부에서는 메타 문자를 사용할 수 없거나 의미가 다르게 사용된다.

 

 

 

* 문자 클래스의 종류

문자 클래스 설명
[xy] x 또는 y를 찾는다.
[^xy] x, y를 제외하고 문자 하나를 찾는다. (문자 클래스 내의 ^는 not을 의미)
[x-z] x부터 z 사이의 문자 중 하나를 찾는다.
\^  ^(특수문자)을 식에 문자 자체로 포함한다.
\b  문자와 공백 사이의 문자를 찾는다.
\B 공백을 제외한 문자와 문자 사이의 문자를 찾는다.
\d 숫자를 찾는다.
\D 숫자가 아닌 값을 찾는다.
\s 공백 문자를 찾는다.
\S 공백이 아닌 문자를 찾는다.
\t Tab 문자를 찾는다.
\v vertical Tab 문자를 찾는다.
\w 알파벳 + 숫자 + _을 찾는다.
\W 알파벳 + 숫자 + _을 제회한 모든 문자를 찾는다.

 

 

 

 

 

* 자주 사용되는 패턴

아래의 표는 폼 페이지에 입력 양식의 데이터 형식으로 주로 사용되는 정규 표현식이다.

 

데이터 형식 패턴
숫자만 ^[0-9]*$
영문자만 ^[a-zA-Z]*$
한글만 ^[가-힣]*$
영문자와 숫자만 ^ [a-zA-Z 0-9]*$
이메일 /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
휴대전화 ^01(?0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$
^\d{3}-\d{3,4}-\d{4}$
전화번호 ^\d{2.3}-\d{3,4}-\d{4}$
주민등록번호 \d{6}\-[1-4]\d{6}
IP 주소 ([0-9]{1,3})\. ([0-9]{1,3})\. ([0-9]{1,3})\. ([0-9]{1,3})
 URL ^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/\([a-z0-9-]+\.)+[a-z0-9]{2,3}.*$
날짜 ^\d{1,2}\/\d{1,2}\/\d{2,4}$

 

*http://regexlib.com 에서 더 다양한 정규식을 얻을 수 있다.

 

 

저작자표시

'코딩 > JSP' 카테고리의 다른 글

웹쇼핑몰 : 상품 등록 데이터의 유효성 검사하기  (0) 2023.12.11
[10주 1일차] 다국어 처리  (0) 2023.12.11
[9주 5일차] 파일 업로드 (2)  (1) 2023.12.08
웹쇼핑몰  (1) 2023.12.08
[9주 4일차] 파일 업로드  (0) 2023.12.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday