4. 유효성 검사 - 01. 기본 유효성 검사와 데이터 형식 유효성 검사

• 유효성 검사

- 유효성 검사 (Validation)는 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것을 의미합니다.

- 유효성 검사의 예로는 폼 페이지에서 나이를 입력할 때 숫자를 인식하는 검사, 회원 가입 시 아이디 중복 검사 등이 있습니다.

 

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

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

- 자바스크립트는 웹 브라우저에서 유효성 검사를 처리하므로 서버에서 처리하는 것보다 속도가 빠르고, 서버에 과부하를 주지 않습니다.

<script type="text/javascript">
	function 핸들러 함수() {
    	var str=document.폼이름.입력항목이름.value;
    }
</script>
<form name="폼이름">
	<input type="submit" onclick="핸들러 함수()">
</form>

 

 

2. 유효성 검사 처리 방법

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

- 유효성 검사의 종류

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

 

 

---

 

 

• 기본 유효성 검사

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

- 데이터 유무 확인하기 예시

/* 1. 데이터 유무 확인하기 */
document.폼이름.입력양식이름.value==""

if(document.frm.name.value=="") {
	alert("이름을 입력해주세요");
}

/* 2. 데이터 길이 확인하기 */
document.폼이름.입력양식이름.value.length

if(document.frm.name.value.length < 6 || document.frm.name.value.length > 12) {
	alert("이름은 6 ~ 12자로 입력해주세요");
}

/* 3. 숫자 여부 확인하기 */
isNaN(docuemnt.폼이름.입력양식이름.value)

if(!isNaN(document.frm.name.value.substr(0,1))) {
	alert("이름은 숫자로 시작할 수 없습니다.);
}

 

 

• 데이터 형식 유효성 검사

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

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

 

- Flag의 종류

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

 

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

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