[쉽게 배우는 JSP 웹 프로그래밍] 8장 '유효성 검사' 정리 요약

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

 

 

유효성 검사를 위한 핸들러 함수 - 이벤트 발생 시(i.e. submit) 유효성 검사를 위해 매핑하는 메소드

js를 활용하면 웹 브라우저에서 유효성 검사를 처리하기 때문에 속도가 빠르고, 서버에 과부하를 주지 않음

기본 유효성 검사와 데이터 형식 유효성 검사가 있음

 

js로 처리를 위해 접근하려면 태그에 name 속성을 입력한 값으로 접근

// html 코드를
<form name="loginForm"> ... </form>

// js로 접근 하려면 "document.name값"을 통해서 가능
<script>
	alert(document.loginForm. ...)
</script>

 

 

 

- 기본 유효성 검사 : 입력 항목에 입력한 데이터 값의 유무여부, 데이터 길이, 대소문자, 숫자 등을 검사

<script>
    // 값이 비어있는지 확인
    if (document.form name명.하위 태그 name 명.value == "")
    
    // 값의 길이를 확인
    if (document.form name명.하위 태그 name 명.value.length < 4 || document.form name명.하위 태그 name 명.value.length > 12  )
	
    // 숫자 여부 확인
    isNaN(document.form name명.하위 태그 name 명.value)
    
    // 규칙이 모두 맞으면 데이터 값을 이동시킴
    form.submit();
</script>

 

 

 

- 데이터 형식 유효성 검사 : 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용

 

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

패턴이 일정한 데이터를 검사하는데 이용 (ex. 전화번호, 이메일 등)

객체 초기화, RegExp 두 가지 방법이 있음

 

// 객체 초기화
const 변수명 = /정규표현식/플래그;

// RegExp
const 변수명 = new RegExp('정규표현식', 플래그);

 

플래그(Flag)의 종류

i - 문자열의 대소문자를 구분하지 않고 검출

g - 문자열 내의 모든 패턴을 검출

m - 문자열에 줄바꿈 행이 있는지 검출

 

정규 표현식의 메소드

test() - 문자열이 정규 표현식에 부합한지 판단하여 true/false로 반환

exec() - 문자열에서 정규 표현식에 부합한 문자열을 추출하여 반환