3장 유효성 검사

유효성 검사

• 사용자가 폼 화면을 통해 입력한 데이터 값이 특정 규칙에 적합하게 입력되었는지 서버에 전송하기 전에 검증하는 절차를 의미

핸들러 함수

• 폼 화면에서 submit을 누르는 이벤트가 발생하였을 경우 유효성 검사를 위해 매핑하는 메소드를 의미
• <input type = “submit” onclick = “핸들러 함수명()”> 과 같이 사용하며 우리가 원하는 핸들러 함수를 JS로 만들어주면 submit을 누를 경우 이벤트가 발생하게 된다.

데이터 입력 여부 검사

• 폼 화면에서 사용자가 아이디와 비밀번호 등 필수 입력 항목을 입력하지 않은 상태로 전송했을 경우 입력하지 않은 항목에 대한 오류 메시지를 출력
• document.폼이름.입력양식이름.value ==”” 형식이다.(입력으로 온value가 공백이면 실행하라는 if문을 JS로 짜면 된다.)

<script type = "text/javascript">
function checkFun(){
    if(document.deptForm.dept.value==""){
        alert("신청할 전공 분야를 입력해 주세요.");
        document.deptForm.dept.select();
    }
}
</script>

데이터의 길이 확인

• value.length를 통해 값의 길이 개수에 따른 제출 거부 가능

<script type = "text/javascript">
function checkFun(){
    var f = document.loginForm;
    if(f.id.value.length < 4 || f.id.value.length > 16){
        alert("아이디는 4~16자 이내로 입력해야 합니다.");
        f.id.focus();
        return false;
    }
}
</script>

숫자 여부 확인

• 폼 화면에서 입력한 데이터가 숫자인지 판별할 때는 isNAN() 함수를 사용하여 숫자 여부를 판별
• 입력한 데이터가 숫자이면 false, 숫자가 아니면 true를 반환해 줌
• 폼 화면에서 닉네임과 비밀번호를 입력할 때 유효성 검사 예제 수행
  • 닉네임 : 대문자 판별
  • 비밀번호 : 숫자 판별

<script type = "text/javascript">
    function checkFun(){
        var f = document.loginForm;
        for(count=0; count<f.id.value.length; count++){
            var ch = f.id.value.charAt(count);
            if((ch < 'A' || ch > 'Z')&& (ch > 'a' || ch < 'z')&& (ch > '0' || ch < '9')){
                alert("닉네임은 영문 대문자로만 입력해 주세요.");
                f.id.focus();
                return false;
            }
        }
        if(isNaN(f.passwd.value)){
            alert("비밀번호는 숫자로만 입력해 주세요.")
            f.passwd.focus();
            return false;
        }
        else return true;
    }
    </script>

정규 표현식

• 폼 화면에서 데이터를 입력할 때 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어를 의미
• 정규 표현식은 주민등록번호를 입력하거나 이메일 등 특정 형식의 패턴이 일정한 데이터를 검사할 때 주로 사용
• 정규 표현식을 선언할 때는 슬래시(/)로 묶어줌
• var 변수명 = /정규 표현식/;
• 폼 화면에서 입력한 값에 대한 데이터 형식의 유효성을 검사할 때는 test() 메소드를 사용
• 자주 사용하는 pattern 정규 표현식을 선언하는 유형은 다음 표 참조

－ 닉네임 : 숫자로 시작할 수 없음
－ 비밀번호 : 숫자만 허용

<script type = "text/javascript">
    function checkFun(){
        var f = document.loginForm;
        var name = f.id.value;
        var regExpName = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

        var pw = f.passwd.value;
        var regExpPasswd = /^[0-9]*$/;

        if(!regExpName.test(name)){
            alert("닉네임은 숫자로 시작할 수 없습니다.");
            f.id.focus();
            return false;
        }
        else if(!regExpPasswd.test(pw)){
            alert("비밀번호는 숫자로만 입력해 주세요.");
            f.passwd.focus();
            return false;
        }
        else return true;
    }
</script>