유효성 검사는 사용자가 입력한 값이 특정 조건을 만족하는지를 검사하는 과정이다. 이후 사용자에게 입력한 값이 어떻게 잘못되었는지 알려주고 이를 수정하여 다시 전송하도록 안내할 수 있다.
기본 유효성 검사
폼의 모든 요소에 대해 루프를 실행하면서 두 종류의 기본 유효성을 검사한다.
- 요소의 required 특성을 가지고 있는가? 만일 그렇다면 값이 입력되어 있는가?
- 입력된 값이 type 특성에 적합한가? 예를 들면, email 입력 창에 메일 주소가 입력되어 있는가?
모든 요소 검색
폼의 elements 컬렉션(폼 내의 모든 요소에 대한 참조를 저장하는 속성)을 이용해 폼 내의 모든 요소를 검사한다. 예제의 경우 elements 컬렉션은 다음과 같은 폼 컨트롤들을 저장하고 있다.
인덱스 | 요소 | 필수 여부 |
---|---|---|
0 | elements.name | 필수 |
1 | elements.email | 필수 |
2 | elements.password | 필수 |
3 | elements.conf-password | 필수 |
4 | elements.birthday | 필수 |
5 | elements.parent-consent | 13세 미만이면 필수 |
6 | elements.bio | 선택 |
추가 유효성 검사
기본 유효성 검사를 마치고 나면 폼의 개별 요소에 대한 검사를 다시 수행한다.
- 비밀번호가 일치하는가?
- 자기소개가 140자를 넘지 않는가?
- 사용자가 13세 미만인 경우 부모 동의 체크박스가 체크되어 있는가?
유효한 요소 추적
오류를 추적하기 위해 valid라는 이름의 객체를 하나 생성한다. valid 객체에 각 요소를 속성으로 저장한다.
- 요소의 id 특성 값을 속성의 이름으로 사용한다.
- 속성의 값은 불리언이다. 요소에서 오류가 발견될 때마다 이 속성 값에 false를 설정한다.
valid 객체의 속성들 |
---|
valid.name |
valid.email |
valid.password |
valid.conf-password |
valid.birthday |
valid.parents-consent |
valid.bio |
오류 처리
오류가 발견되면 스크립트는 폼의 전송을 취소하고 사용자에게 무엇을 해야 할지를 알려준다. 스크립트는 각 요소를 검사하면서 오류가 발견되면 아래의 두 가지 작업을 수행한다.
- valid 객체의 해당 속성 값을 수정하여 콘텐츠가 유효하지 않음을 표시한다.
- setErrorMessage() 함수를 호출한다. 이 함수는 jQuery의 .data() 메서드를 이용하여 요소에 필요한 데이터를 저장한다. 따라서 오류 메시지는 문제가 발생한 요소와 함께 메모리에 저장된다.
폼 전송
폼을 전송하기에 앞서, 스크립트는 폼에 오류가 없는지 확인한다. 만일 폼에 오류가 있으면 스크립트는 폼의 전송을 취소한다. 폼에 입력된 값에 오류가 있는지 검사하기 위해 isFormValid라는 변수를 선언하고 그 값을 true로 설정한다. 이후 valid 객체의 각 속성에 대해 루프를 실행하면서 오류가 있는지(즉, 객체의 속성 중 값이 false인 속성이 있는지) 검사한다. 이후 폼에 오류가 있으면 isFormValid 변수 값을 false로 설정한다. 따라서 isFormValid 변수는 일종의 플래그(flag)처럼 사용한다.
정규 표현식
정규 표현식은 지정된 패턴의 문자를 찾는다. 또한 이 문자들은 다른 문자로 교체할 수도 있다. 아래 기호들은 정규 표현식에서 사용 가능한 빌딩 블록(building block)들이다.
. | 모든 단일 문자 (새 줄 문자 제외) |
[ ] | 괄호 내에 나열된 문자 중 하나 |
[^ ] | 괄호 내에 나열되지 않은 문자 중 하나 |
^ | 줄의 시작 위치 |
$ | 줄의 끝 위치 |
( ) | 하위 표현식(블록 또는 캡쳐링 그룹이라고도 부른다) |
* | 이전 요소가 0개 또는 그 이상 반복됨 |
\n | n번째 하위 표현식 |
{m,n} | 이전 요소가 최소 m번, 최대 n번까지 반복됨 |
/d | 숫자 |
\D | 숫자가 아닌 모든 문자 |
/s | 공백 문자 |
/S | 공백 문자가 아닌 모든 문자 |
/w | 알파벳 문자 및 숫자(A~Z, a~z, 0~9) |
/W | 알파벳 문자 및 숫자가 아닌 모든 문자(_는 제외) |
일반적인 정규 표현식
/^\d+$ | 숫자 검색 |
^[ \s]+ | 공백으로 시작하는 줄 |
/[^@]+@[^@]+/ | 메일 주소 |
/^#[a-fA-F0-9]{6}$/ | 16진수 색상 코드 |
/^(/d{2}\/\d{2}\/\d{4})| (\d{4}-\d{2}-\d{2})$/ |
yy-mm-dd 형식의 날짜 |
코드 의존성과 재사용
어떤 프로젝트든 같은 작업을 수행하는 코드를 두 번 작성하는 것은 피해야 할 일이다. 또한, 프로젝트 간에 코드를 재사용할 수 있도록 해야 한다. 그럴 경우 코드에 의존성(dependency)이 생기게 된다.
의존성
다른 스크립트에 의존하는 스크립트를 작성할 때 해당 스크립트에 의존성이 있다고 표현한다. 이런 경우 주석을 통해 의존성을 명시하여 다른 사람이 분명히 알 수 있도록 하는 것이 좋다.
코드 재사용과 코드 중복
만일 같은 작업을 수행하는 코드를 두번 작성했다면 이를 코드 중복(code duplication)이라고 한다. 대체로 코드 중복은 기피해야 할 현상이다. 코드 중복의 반대 개념인 코드 재사용(code reuse)은 같은 코드가 스크립트의 다른 곳에서 한 번 이상 사용되는 것을 말한다.