JS | form 객체

2023. 1. 4. 14:09·JavaScript

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();
            }
        }

'JavaScript' 카테고리의 다른 글

JS | BOM - 윈도우객체  (0) 2023.01.04
JS | 날짜 객체  (0) 2023.01.04
JS | 이벤트 객체와 dataset  (0) 2023.01.03
JS | 토글탭 실습  (1) 2023.01.03
JS | 이벤트 위임 원리  (0) 2023.01.03
'JavaScript' 카테고리의 다른 글
  • JS | BOM - 윈도우객체
  • JS | 날짜 객체
  • JS | 이벤트 객체와 dataset
  • JS | 토글탭 실습
개발 공부
개발 공부
  • 개발 공부
    개발 공부
    개발 공부
  • 전체
    오늘
    어제
    • 전체보기 (162)
      • 프로젝트 (1)
      • JavaScript (45)
      • Node.js (3)
      • Next.js (5)
      • React (17)
      • NoSQL (0)
      • HTML,CSS (3)
      • CS (6)
      • Java (35)
      • Spring (6)
        • Spring의 정석 (1)
      • Spring boot (1)
      • MySQL (1)
      • 리눅스 (16)
      • JSP (9)
      • AWS (0)
      • git (2)
      • 알고리즘 (1)
      • ect (7)
      • Project (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Java의 정석
    자바
    오블완
    자바의 정석
    티스토리챌린지
    Java
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
개발 공부
JS | form 객체
상단으로

티스토리툴바