JSP - 유효성 검사

유효성 검사

폼(FORM)에서 입력한 값이 특정 규칙에 맞게 입력되었는지 검증하는 것을 유효성 검사라 한다.

 

왜 유효성 검사를 하는가?

- 보안 공격, 잘못된 데이터, 사용자의 실수로 인한 오류를 방지하기 위함

- 동일한 입력 양식과 형태를 유지할 수 있다.

 

검사 항목

- 입력 데이터가 null인지 확인 ㅡ> HTML(required)

- 날짜나 이메일의 입력 양식 ㅡ> HTML(type="email", type="date")

- 나이를 입력할 때 숫자인지 확인하는 유효성 검사 ㅡ> HTML(type="number")

- 입력 데이터의 제한 길이 초과 확인 ㅡ> HTML(maxlength)

- 로그인 인증 시 아이디와 비밀번호를 확인 ㅡ> 서버

- 회원 가입 시 아이디 중복 여부 확인 ㅡ> 서버

 

 

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

-------------------html----------------------
<form action="#" method="post" name="addForm">
  <input type="text" name="aaa" id="aaa">
  <input type="button" id="btn">
</form>

------------------js------------------
var btn = document.querySelector("#btn");
btn.addEventListener("click", btnClick);

function btnClick(){
   var form = document.addForm;

   var aaa = document.querySelector("#aaa").value;
   if(aaa.length<4){
       alert("4자 이상 입력해 주세요.");
       return;
   }
   form. submit();
}

 

1. form과 input태그를 작성한다.

2. js에서 button을 클릭하면 btnClick 함수가 호출되는 이벤트를 작성한다.

3. input에서 입력한 값의 길이가 4보다 작으면 "4자 이상 입력해 주세요." 문구가 알림으로 출력되고 함수가 종료된다.

4. 4자 이상이라면 submit() 메서드로 폼이 전송된다. 

 

 

기본 유효성 검사

사용자가 폼에 입력한 데이터 값의 유무를 확인하고, 데이터의 길이와 숫자, 문자인지 확인하는 것을 기본적인 유효성 검사라고 한다.

 

데이터 유무 확인

사용자가 폼에 값을 입력하지 않고 submit 했을 때를 대비하는 유효성 검사다.

document.폼이름.인풋이름.value==""

 

 

데이터 길이 확인

사용자가 폼에 입력하여 전송한 데이터 값의 길이를 확인하고, 비교할 수 있다.

document.폼이름.인풋이름.value.length

 

숫자 여부 확인

사용자가 폼에 입력하여 전송한 데이터 값이 숫자인지 아닌지 판단하여 true/false를 반환한다.

*숫자인 경우 false, 문자인 경우 true

isNaN(document.폼이름.인풋이름.value)

 

입력한 값이 소문자인지 확인

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡhtmlㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<form action="#" name="loginForm" method="post">
	<p>아 이 디 : <input type="text" name="id" id="id" placeholder="영소문자만 입력해 주세요.">
	<p> <input type="button" value="전송" id="btn">
</form>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡjsㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

var btn = document.querySelector("#btn");
btn.addEventListener("click", btnClick);

function btnClick(){
    var form = document.loginForm;
    var id = document.querySelector("#id").value;

    var ch;
    for(i=0; i<id.length; i++){
        ch = id.charAt(i);

        if( (ch<'a' || ch>'z') && (ch>'A' || ch<'Z') && (ch>'0' || ch<'9') ){
            alert("아이디는 소문자만 입력 가능합니다");
            form.id.select();
            return;
        }
    }
}

 

사용자가 입력한 id를 가져와 반복문과 charAt() 메서드를 사용해 한 글자식 추출하여 영어 소문자를 입력한 게 맞는지 확인할 수 있다.

 

 

데이터 형식 유효성 검사

정규 표현식을 사용해 데이터 형식이 유효한지 확인할 수 있다.

정규 표현식은 보통 주민등록번호, 이메일, 전화번호 등과 같은 일정한 패턴을 가진 데이터를 검사하는 데 많이 사용된다.

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

 

Flag의 종류

Flag	설명
i	대소문자를 구분하지 않는다.
g	문자열 내의 모든 패턴을 검출한다.
m	줄 바꿈 행이 있는지 검출한다.

 

정규 표현식 메서드 종류

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

 

예시

var regExp = /Java/i;
var str = "JavA Server Pages";
var result1 = regExp.test(str); ==> true
var result2 = regExp.exec(str); ==> Java

 

1. 정규 표현식 작성

2. 문자열 생성

3. 메서드를 사용

 

표현 방법

기본 메타 문자

메타 문자	설명
^x	문자열이 x로 시작
x$	문자열이 x로 종료
x|y	x또는 y를 찾는다.(or연산자)
x[n]	x를 n번 반복한 문자를 찾는다.
x[n,]	x를 n번 이상 반복한 문자를 찾는다.
x[n,m]	x를 n번 이상 m번 이하 반복한 문자를 찾는다.
.x	다음에 x가 오는 문자열을 찾는다.

 

문자 클래스

문자 클래스	설명
[x-z]	x부터 z사이의 문자중 하나를 찾는다. ([0-9] [a-z] [A-Z])
\d	숫자를 찾는다
\S	공백이 아닌 문자를 찾는다.

 

자주 사용되는 패턴

형식	패턴
숫자만	^[0-9]*$
영문자만	^[a-zA-Z]*$
한글만	^[가-힣]*$
영문자와 숫자만	^[a-zA-Z0-9]*$