JavaScript - 폼 유효성 확인

JavaScript

폼 유효성 확인

form 객체

• document 객체의 하위 객체
• form 태그 내에 들어있는 여러 입력 양식을 제어
• form의 하위 객체들

폼 객체 사용 방법

1. 태그의 name 속성을 객체로 사용하는 경우
   • <form name="newMemberForm">
   • <input type="text" name="id">
   • <input type="password" name="passwd">
   • newMemberForm.id.focus();
   • newMemberForm.id.value = “”;
   • newMemberForm.passwd.focus();
2. 문서 객체 모델 (DOM) 방식을 사용하는 경우
   • <input type="text" id="name">
   • var name = document.getElementById(‘name’);
   • name.focus();
   • name.value = “”;

폼 유효성 확인 예제

join.html (밑의 링크 확인)

• https://hyeon99-dev.tistory.com/75
• 별도의 checkForm.js 파일 생성(External 방식)
• 입력 값 확인
  • 성명 입력하지 않은 경우
  • ID 입력하지 않은 경우
  • ID 입력 값의 길이가 6~10이 아닌 경우
  • [비밀번호]와 [비밀번호 확인]이 일치하지 않은 경우
  • <select> 에서 선택하지 않은 경우
  • 라디오 버튼 하나도 체크하지 않은 경우
  • 체크박스 하나도 선택하지 않은 경우

checkForm.js

• 성명을 입력하지 않은 경우

window.onload = function() {

    // id joinForm인 submit이 눌렸을 때 이벤트 처리
    document.getElementById('joinForm').onsubmit = function() {

        // 성명 입력하지 않은 경우 -> 경고창 출력
        var name = document.getElementById('name');

        // 값이 출력됐는지 확인, 비었으면 경고창 출력 -> 입력란 포커스 -> 서버로 전송되지 않게 함
        if(name.value == ""){
            alert("성명을 입력하시오");
            name.focus();
            return false; // 서버로 전송되지 않게 함
        }        
    }; // onsubmit
}; // window.onload

• id 조건을 충족하지 않은 경우

window.onload = function() {
    document.getElementById('joinForm').onsubmit = function() {

    // ...

    // id를 입력하지 않은 경우

        var id = document.getElementById('id');

        if(id.value == ""){
            alert("아이디를 입력하시오");
            id.focus();
            return false;
        }

        if(id.value.length <='6' || id.value.length >= '10'){
            alert("아이디는 6~10자로 입력하세요");
            id.value = "";
            id.focus();
            return false;
        } // id 길이 처리
    }
}

• 비밀번호 일치 여부 확인

window.onload = function() {
    document.getElementById('joinForm').onsubmit = function() {

    // ...

      // 비밀번호와 비밀번호 확인 일치하지 않는 경우
        var password = document.getElementById('password');
        var passwordCheck = document.getElementById('passwordCheck');

        if(password.value != passwordCheck.value){
            alert("비밀번호가 일치하지 않습니다.");
            passwordCheck.value = "";
            passwordCheck.focus();
            return false;
        } // 비밀번호 일치 여부 처리
    } // onsubmit
} // window.onload

<select> 태그

• 목록에 있는 여러 항목 중 선택
• (1) 항목 선택하면 selecctedIndex 속성에 선택된 항목의 인덱스 값 저장(0부터 시작)
• 하나도 선택하지 않으면 selectedIndex값은 -1
• (2) <option> 태그 중 하나를 빈 값으로 지정하고, 값이 없으면 선택하지 않은 것으로 처리해도 무방
  • <option value="" selected>직업선택
  • if(job.value == ""){ ... }
• (3) <option> 태그 하나를 미리 선택해놓으면 유효성 확인 필요 없음
  • <option value="프로그래머" selected>

• 라디오버튼 체크 여부 확인

window.onload = function() {
    document.getElementById('joinForm').onsubmit = function() {

        // ...

        var job = document.getElementById('job');

        // (1) 직업을 선택하지 않은 경우 <option value=""> 직업선택
        if(job.selectedIndex == 0){
            alert("직업을 선택하세요");
            return false;
        }

        // (2) value값 사용
        if(job.value == ""){
            alert("직업을 선택하세요");
            return false;
        }

        // (3) html의 option 태그에 selected를 넣어두면 js에서 처리 X
    } // onsubmit
} // onload

라디오버튼

• <input type = "radoio">
• 그룹에서 여러 개 중 1개만 선택 가능
• 그룹에 속한 여러 개의 라디오 버튼의 그룹 이름(name 속성)이 동일하므로 라디오 버튼(객체)는 배열 형태로 사용
• 배열의 각 원소를 하나씩 확인
  • checked 속성이 true면 체크된 상태
  • false면 체크되지 않은 상태
  • for문 사용 / if문 사용
• 미리 체크되어 있게 하면유효성 확인 필요 없음

• 이메일 수신여부 확인

window.onload = function() {
    document.getElementById('joinForm').onsubmit = function() {

        // ...
        // 이메일 수신 여부 확인
        var chk = false;
        for(var i=0; i<joinForm.emailRcv.length; i++){
            if(joinForm.emailRcv[i] == true){
                chk == true; // 하나라도 체크되면 true 값 저장
            } // 하나도 체크되지 않으면 false 유지
        }

        if(chk == false){
            alert("이메일 수신 여부를 선택하세요");
            return false;
        }        

    } // onsubmit
} // onload

체크박스

• <input type="checkbox">
• 여러 개 선택 가능
• checked 속성이 true 이면 체크된 상태
• false면 체크되지 않은 상태
• 모든 체크박스를 확인해야 한다.

• 동의 여부 확인

window.onload = function() {
    document.getElementById('joinForm').onsubmit = function() {

        // ...
        // 동의 여부 확인
        var agreement1 = document.getElementById("agreement1");
        var agreement2 = document.getElementById("agreement2");

        if (agreement1.checked == false && agreement2.checked == false) {
            alert("동의에 체크하지 않았습니다.");
            return false;
        }

    } // onsubmit
} // onload