JavaScript 양식 유효성 검사란?
JavaScript는 웹 서버로 데이터를 전송하기 전에 클라이언트(사용자의 브라우저) 쪽에서 양식(form) 데이터의 유효성을 검사할 수 있는 방법을 제공합니다. 클라이언트 측 검증을 활용하면 잘못된 데이터가 서버로 전송되기 전에 미리 걸러낼 수 있고, 사용자에게 즉각적인 피드백을 제공할 수 있어 편의성도 크게 향상됩니다.
기본적인 양식 유효성 검사는 모든 필수 입력 항목이 채워져 있는지 확인하는 작업을 의미합니다. 구현 방식도 어렵지 않아, 양식 내의 각 필드를 순서대로 순회하면서 해당 필드에 데이터가 입력되어 있는지만 확인하면 됩니다.
예제
아래 예제 코드를 실행하면 JavaScript로 기본적인 양식 유효성 검사를 직접 구현해 볼 수 있습니다. 이 예제는 이름, 이메일, 우편번호, 국가 총 4개 항목을 검사하며, 입력값이 조건에 맞지 않으면 경고창을 표시하고 해당 입력 필드로 초점을 이동한 뒤 제출을 중단합니다.
<html>
<head>
<title>양식 유효성 검사</title>
<script>
// 양식 유효성 검사 함수
function validate(){
if( document.myForm.Name.value == '' ) {
alert( '이름을 입력해 주세요!' );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == '' ){
alert( '이메일을 입력해 주세요!' );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == '' ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( '우편번호는 5자리 숫자(#####)로 입력해 주세요.' );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == '-1' ){
alert( '국가를 선택해 주세요!' );
return false;
}
return( true );
}
</script>
</head>
<body>
<form action='/cgi-bin/test.cgi' name='myForm' onsubmit='return(validate());'>
<table cellspacing='2' cellpadding='2' border='1'>
<tr>
<td align='right'>이름</td>
<td><input type='text' name='Name' /></td>
</tr>
<tr>
<td align='right'>이메일</td>
<td><input type='text' name='EMail' /></td>
</tr>
<tr>
<td align='right'>우편번호</td>
<td><input type='text' name='Zip' /></td>
</tr>
<tr>
<td align='right'>국가</td>
<td>
<select name='Country'>
<option value='-1' selected>[국가 선택]</option>
<option value='1'>USA</option>
<option value='2'>UK</option>
<option value='3'>INDIA</option>
</select>
</td>
</tr>
<tr>
<td align='right'></td>
<td><input type='submit' value='제출' /></td>
</tr>
</table>
</form>
</body>
</html>
코드 동작 원리
validate() 함수 호출: form 태그의 onsubmit 속성에 return(validate()) 형태로 연결되어 있어, 사용자가 제출 버튼을 누르면 가장 먼저 이 함수가 실행됩니다.
빈 값 검사: 이름과 이메일 필드는 값이 빈 문자열인지 확인합니다. 비어 있다면 alert()로 경고 메시지를 보여주고, focus()로 해당 입력창에 커서를 옮긴 후 return false로 제출을 막습니다.
형식 검사: 우편번호는 세 가지 조건을 동시에 확인합니다. 값이 비어 있는지, isNaN() 함수로 숫자가 아닌 값이 들어왔는지, 그리고 글자 수가 5자리인지 검사하여 올바른 ##### 형식인지 판별합니다.
선택 항목 검사: 드롭다운(select) 목록은 초기값이 -1(아직 선택하지 않음)인지 확인하여 사용자가 실제로 국가를 골랐는지 검증합니다.
검사 통과 시: 모든 조건을 통과하면 return true가 반환되어 양식이 지정된 action 주소(/cgi-bin/test.cgi)로 정상적으로 전송됩니다.
참고 사항
클라이언트 측 유효성 검사는 사용자 경험 개선에 매우 효과적이지만, 사용자가 JavaScript를 비활성화하거나 요청을 조작할 수 있으므로 보안 목적만으로는 충분하지 않습니다. 따라서 실무에서는 클라이언트 측 검증과 함께 서버 측 검증을 반드시 병행하는 것이 좋습니다.