사용자가 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것
유효하지 않은 데이터 값 입력 시 부적합하다고 판단하여 다시 폼페이지로 되돌려 사용자에게 오류가 있음을 알려준다.
필요한 이유는 보안 공격, 잘못된 데이터, 사용자의 실수로 예상 가능한 오류 등을 방지할 수 있기 때문이다.
입력데이터가 null 인지 확인 / 날짜,이메일 입력 시 형식 맞는지 확인 / 나이 입력시 숫자인지 확인/ 입력데이터의 제한 길이 초과했는지 확인/로그인 인증 시 아이디와 비밀번호를 확인 하는 등의 유효성 검사가 있다.
유효성 검사를 위한 핸들러 함수
핸들러 함수는 폼페이지에서 이벤트가 발생했을 때의 유효성 검사를 위해 매핑하는 메소드
자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성한다.
JSP는 웹 브라우저에서 유효성 검사를 처리하므로 서버에서 처리하는 것 보다 속도가 빠르고 서버에 과부하를 주지 않는다.
데이터 값이 유효성 검사 통과 -> 서버로 전송
그렇지 않으면 서버전송 취소 -> 사용자에게 오류메세지를 보여준다.
유효성 검사를 위해 핸들러 함수를 만들때, 핸들러 함수의 폼 이름과 form태그의 name 속성의 폼 이름이 같아야 한다!
input 태그의 type 속성 값 -> submit인 경우 : onclik 속성을 이용하여 핸들러 함수를 설정 / form 태그의 onsubmit 속성 값에 설정
폼페이지에서 입력된 데이터 값을 핸들러 함수로 가져오기 위해 form 태그의 name 속성 / forms 객체 이용
-form 객체 이용하는 경우 : forms 객체 - 배열의 형태
length 속성으로 크기를 알 수 있고 배열 값인 index 는 form 태그가 나타나는 순서로 0부터 시작
유효성 검사 처리방법
기본 유효성 검사: 폼페이지에 입력된 값의 존재 유무 검사 , 기본적인 것이 맞는지 검사
1) 데이터 유무 확인
입력데이터의 유무 검사
2) 데이터 길이 확인하기
회원 가입 페이지에서 입력 데이터의 제한 길이를 검사
document.폼.이름.입력양식.이름.value.length
3) 숫자 여부 확인
isNaN()함수 이용
인자 값이 숫자이면 false 반환, 숫자가 아니면 true를 반환
if(!isNaN(document.frm.name.value.subsrt(0,1))){
alert("이름은 숫자로 시작할 수 없습니다");
document.frm.name.select();
데이터 형식 유효성 검사 : 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하여 정규 표현식을 사용한다.
정규표현식 : 규칙을 가진 문자열의 집합으 ㄹ표현하는데 사용하는 형식 언아
패턴으로 표현한 수식
두가지 형식을 사용한다.
1) 객체 초기화 : 입력된 표현식이 거의 바뀌지 않는 상수형태일때 사용
var 변수 이름 = /정규 표현식/[Flag];
2) RegExp 객체를 이용하는 방법, 정규 표현식이 자주 변경될 때 사용
var 변수 이름 = /정규 표현식/[Flag];
정규 표현식의 메소드 종류
-test() : 매개변수값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false 값 반환