JS | form 객체

form 객체는 document 객체의 하위 객체 중 하나입니다.

form을 이용하면 form 유효성 검사들을 할 수 있습니다.

 

form객체는 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능합니다.

ex) document.폼명.요소명

 

전부 암기합니다.

속성 값	설명
value	input, textarea 요소의 value 값을 반환합니다
checked	checkbox 나 radio 가 체크되어 있으면 true, 체크되어 있지 않으면 false 를 반환합니다
disabled	요소가 활성화 상태이면 false, 비활성 상태이면 true 를 반환
length	요소의 개수를 반환
focus()	요소의 포커스를 맞춥니다
blur()	요소의 포커스를 없애 줍니다
submit()	form의 값을 전송합니다
reset()	form의 값을 초기화 합니다

 

focus는 동작후 입력 값이 틀렸을 때 틀린 input에 focus를 맞춰주는 기능입니다.

 

예제 1 ) form객체 이용하기

html ↓↓↓

<form action="list.board" name="actionForm">
        <h3>가입창</h3>
        이름 : <input type="text" name="name"> <br>
        번호 : <input type="text" name="phone" onblur="autoHypen()"> <br>
                                              <!--onblur : 포커스가 나갈 때-->
        분야 :
        <input type="checkbox" name = "check">CSS
        <input type="checkbox" name = "check">JS
        <input type="checkbox" name = "check">HTML
        
        <input type="submit" value="submit">
    </form>

script

↓↓↓

/*
        1.form태그는document의 자식이라서 form의 document.폼네임 접근이 가능합니다.
        2.input은 form의 자식이라서 document.폼네임.태그name으로 접근이 가능합니다.
        
        */

        // console.log(document.actionForm);
        // console.log(document.actionForm.name);
        // console.log(document.actionForm.phone);

        var submit = document.actionForm.querySelector("input[type='submit']");
        submit.onclick = function(){
            event.preventDefault(); //서브밋의 고유 이벤트 제거

            if(document.actionForm.name.value.length <= 0){ //8자미만
                alert('이름을 입력해주세요');
                document.actionForm.name.focus(); //포커싱
                return; //반드시 함수종료
            } else if(document.actionForm.phone.value.length != 11){
                alert('번호를 제대로 입력해주세요');
                document.actionForm.phone.focus();
                return;
            } else { //체크박스
                var chk = document.actionForm.check;
                var cnt = 0;
                for(var i = 0; i < chk.length; i++){
                    console.log(chk[i].checked);
                    if(chk[i].checked){
                        cnt++;
                    }
                }
                if(cnt == 0) {alert('1개 이상 선택해주세요');
                return;}
            }
            document.actionForm.submit(); //폼.submit();
        }

        //하이픈 없애주는 함수
        function autoHypen(){
            event.target.value = event.target.value.replaceAll("-","");
        }

예제 2 ) 정규표현식을 이용하여 가입조건 체크하기

정규표현식 test 함수 

 

enter의 keycode

html ↓↓↓

<form action = "list.board" name = "joinForm">
      <h3>회원가입</h3>
      ID  <input type="text" name="id" placeholder="문자와 숫자" onkeypress="enter()"><br>
      PW<input type="text" name="pw" placeholder="숫자,영문자,특수문자 최소 한개" onkeypress="enter()"><br>
      생략...<br>
      <button type="button" onclick="joinCheck()">가입</button>
</form>

script↓↓↓

function joinCheck(){ //가입 조건 체크
            // var regExp = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/; //4글자 이상 8글자 이하
            // if(!regExp.test("aaabbb1!")){
            //     console.log("정규표현식 만족하지 않음");
            // }

            var regExp1 = /^[A-Za-z0-9]{5,10}$/; //5이상 11이하
            var regExp2 = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/; //4글자 이상 8글자 이하

            var form = document.joinForm; //폼태그
            if(!regExp1.test(form.id.value)){
                alert("아이디는 영문자와 숫자포함 5~10자로 입력하세요");
                form.id.focus();
                return;
            } else if(!regExp2.test(form.pw.value)){
                alert("비밀번호는 영문자 숫자 특수문자 포함 4~8자로 입력하세요");
                form.pw.focus();
                return;
            } else {
                form.submit(); //폼을 전송
            }
        }

        //ux 엔터키값 처리
        function enter(){
            if(event.keyCode == 13){  //keyCode는 사용자가 누른 키보드 번호 enter==13
                joinCheck();
            }
        }