유효성 검사란?
사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것
즉 사용자가 실수로 유효하지 않은 데이터 값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려준다.
유효성 검사의 예
폼 페이지에서 나이를 입력할 때 숫자를 인식하는 검사, 회원 가입 시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사, IP 패킷 검사 등
유효성 검사가 필요한 이유
보안 공격, 잘못된 데이터, 사용자의 실수로 예상 가능한 오류 등의 방지
다양한 사용자가 폼 데이터를 입력해도 폼 페이지의 동일한 입력 양식과 형태를 유지할 수 있다(데이터베이스에 원하는 데이터가 쌓임)
핸들러 함수
폼 페이지에서 이벤트가 발생했을 때(<submit>를 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드
자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성하게 됨
자바스크립트는 웹 브라우저에서 유효성 검사를 처리하기때문에 서버에서 처리하는 것 보다 속도가 빠르고 서버에 과부하를 주지 않음
사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지를 검사
입력된 데이터가 유효성 검사를 통과하면 서버로 전송하고, 그렇지 않으면 서버 전송을 취소하고 사용자에게 오류 메시지를 출력
JSP에서 유효성 검사를 위해 핸들러 함수를 만드는 과정
<script type="text/javascript">
function 핸들러 함수 {
var str = document.폼 이름.입력항목 이름.value;
}
</script>
<form name="폼 이름">
<input type="submit" onclick="핸들러 함수()">
</form>
입력한 이름을 핸들러 함수로 가져와서 출력하는 예시 코드
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
function checkForm() {
alert("이름은 " + document.frm.name.value + "입니다");
</script>
<body>
<form name="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
form 태그의 id 속성을 이용해서 핸들러 함수로 폼 입력 데이터를 가져오는 다른 방법
// form 태그가 <form id="loginForm">이라면 다음과 같이 접근한다.
var form = document.getElementsTagName("form")[0];
var form = document.getElementById("loginForm");적용 예
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
function CheckForm() {
var form = document.getElementById("frm");
alert("이름은 " + form.name.value + "입니다");
}
</script>
<body>
<form id="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="CheckForm()">
</form>
</body>
</html>
유효성 검사 처리 방법
| 유효성 검사 | 설명 |
| 기본 유효성 검사 | 폼 페이지에 입력된 데이터 값의 존재 유무를 검사 |
| 데이터 형식 유효성 검사 | 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하며 정규 표현식을 사용 |
기본 유효성 검사
사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사
데이터 유무 확인하는 코드
document.폼 이름.입력양식 이름.value == ""
데이터 유무 확인하는 코드 사용 예시
<%@ page contentType="text/html; charset=utf-8 %>
<html>
<head>
<title>Validation</title>
</head>
<script> type="text/javascript">
<function checkForm() {
if (document.frm.name.value == "") {
alert("이름을 입력해주세요.");
document.frm.name.select();
}
</script>
<body>
<form name="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
입력 데이터 길이 확인하기
회원 가입 페이지에서 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사하는 것
입력 데이터 길이 검사하는 코드
document.폼 이름.입력양식 이름.value.length
입력 데이터 길이 검사하는 코드 예시
<%@ page contentType="text/html; charset=utf-8 %>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
<function checkForm() {
if (document.frm.name.value.length < 6 || document.frm.name.value.length > 12) {
alert("이름을 6~12자 이내로 입력해주세요.");
document.frm.name.select();
}
}
</script>
<body>
<form name="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
숫자 여부 확인하기
isNaN은 isNotaNumber의 약자이며, isNaN() 함수의 인자 값이 숫자이면 false를 반환하고 숫자가 아니면 true를 반환
숫자 여부 검사하는 코드
isNaN(document.폼 이름.입력양식 이름.value)
숫자 여부 검사하는 코드 예시
<%@ page contentType="text/html" charset=utf-8 %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
function checkForm() {
if (!isNaN(document.frm.name.value.substr(0, 1))) {
alert("이름은 숫자로 시작할 수 없습니다!");
document.frm.name.select();
}
}
</script>
<body>
<form name="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
조건에 맞지 않는 키를 방지하는 방법
키 입력에 관한 이벤트가 발생할 수 있도록 폼 페이지의 입력 양식에 onkeypress 속성을 사용해서 핸들러 함수를 설정한다. 핸들러 함수를 통해 들어온 키 값을 구별하기 위해 event 객체의 keyCode 속성을 사용하며, 아스키코드 값으로 키 값을 구별
조건에 맞지 않는 키를 방지하는 코드 예시
<%@ contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
function CheckKey() {
alert(event.keyCode);
if(!(event.keyCode >= 48 && event.keyCode <= 57)) {
alert("숫자만 입력 가능합니다");
event.returnValue=false;
}
}
</script>
<body>
<form name="loginForm" action="#" method="post">
<p> 나이 : <input type="text" name="age" onkeypress="CheckKey()">
<input type="submit" value="전송">
</form>
</body>
</html>| 구분 | 키 값 범위 |
| 숫자만 입력 | event.keyCode >= 48 && event.keyCode <= 57 |
| 영어만 입력 | (event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122) |
| 특수문자만 입력 | (event.keyCode >= 33 && event.keyCode <= 47) || (event.keyCode >= 58 && event.keyCode <= 64) |
| 한글만 입력 | event.keyCode >= 12592 && event.keyCode <= 12687 |
정규 표현식
문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한 수식
주민등록번호, 전화번호, 이메일과 같이 데이터 형식의 패턴이 일정한 데이터를 검사하는 데 이용
객체 초기화를 사용(입력된 표현식이 거의 바뀌지 않음)하거나 RegExp 객체를 이용(정규 표현식이 자주 변경될 때 주로 사용)
정규 표현식 코드 예시
객체 초기화 사용
var 변수 이름 = /정규 표현식/[Flag];RegExp 객체 이용
var 변수 이름 = new RegExp('정규 표현식',['Flag']);Flag의 종류
| Flag | 설명 |
| i | Ignore Case: 문자열의 대소문자를 구별하지 않고 검출 |
| g | Global: 문자열 내 모든 패턴을 검출 |
| m | Multi Line: 문자열에 줄 바꿈 행이 있는지 검출 |
- Flag를 설정하지 않으면 문자열 내에 검색 대상이 많이 있어도 한 번만 검출하게 됨
정규 표현식의 메소드 종류
| 메소드 | 설명 |
| test() | 매개변수 값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false를 반환 |
| exec() | 매개변수 값으로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환 |
exec() 메소드의 사용 코드 예시( /Java/에 해당하는 문자열을 찾음)
<%@ page contentType="text/html; charset=utf-8 %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
function checkForm() {
var regExp = /Java/i; // var regExp = new RegExp('java','i');와 같음
var str = document.frm.title.value;
var result = regExp.exec(str);
alert(result[0]);
}
</script>
<body>
<form name="frm">
<p> 제목 : <input type="text" name="title">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>
정규 표현식의 표현 방법
메타 문자의 종류
| 메타 문자 | 설명 |
| ^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 | 알파벳 + 숫자 + _을 제외한 모든 문자를 찾음 |
test() 메소드의 사용 코드 예시
<%@ page contentType="text/html; charset=utf-8 %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
<function checkForm() {
var str = document.frm.name.value;
var regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힇]/;
if (!regExp.test(str)) {
alert("이름은 숫자로 시작할 수 없습니다!");
return;
}
}
</script>
<body>
<form name="frm">
<p> 이름 : <input type="text" name="name">
<input type="submit" value="전송" onclick="checkForm()">
</form>
</body>
</html>자주 사용되는 정규표현식 패턴
| 데이터 형식 | 패턴 |
| 숫자만 | ^[0-9]*$ |
| 영문자만 | ^[a-zA-Z]*$ |
| 한글만 | ^[가-힇]*$ |
| 영문자와 숫자만 | ^[a-zA-Z0-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,4}.*$ |
| 날짜 | ^\d{1,2}\/\d{1,2}\/\d{2,4}$ |
- http://regexlib.com에서 다양한 정규 표현식 확인이 가능하다.