Flaming Soccer ball

기록

JS | CSS | HTML

71일차 Java Script DOM

leo lee 2023. 1. 4.
반응형

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의 값을 초기화 합니다

 

예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>06 - index01</h2>
  <h3>form 태그</h3>

  <form action="list.board" name="actionForm">
    <h3>가입</h3>
    이름 : <input type="text" name="name"><br>
    연락처 : <input type="text" name="phone" onblur="phoneFunc(event)"><br>
    분야 :
    <input type="checkbox" name="check"> HTML
    <input type="checkbox" name="check"> CSS
    <input type="checkbox" name="check"> JS

    <input type="submit" value="확인">
  </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(); //submit의 고유 이벤트 제거

        if(document.actionForm.name.value.length <=0){//0자 미만
            alert("이름은 필수입니다");
            document.actionForm.name.focus();//포커싱
            return;
        }else if(document.actionForm.phone.value.length != 11){
            alert("번호는 -없이 11글자로 입력하세요");
            document.actionForm.phone.focus();//포커싱
            return;
        }else{//체크박스
            var cnt = 0; 
            var check = document.actionForm.check;
            for(var i = 0; i < check.length; i++){
                if(check[i].checked){
                    cnt++;
                }
            }
            if(cnt==0){
                alert("적어도 하나의 분야를 선택하세요");
                return;
            }
        }

        document.actionForm.submit();
    }    

    function phoneFunc(e){
        e.target.value=e.target.value.replaceAll("-","");
    }

  </script>
</body>
</html>

 

 

정규표현식

예시 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form action="list.board" name="actionForm">
        <h3>가입창</h3>
        아이디: <input type="text" name="id" placeholder="아이디는 문자와 숫자" onkeypress="enter(event)"><br>
        비밀번호: <input type="password" name="pw" placeholder="숫자, 영문자, 특수문자 최소 한개" onkeypress="enter(event)"><br>
        생략....<br>
        <button type="button" onclick="joinCheck()">가입</button>
    </form>


    <script>
        var regExpid = /^[A-Za-z0-9]{5,10}$/g; 
        var regExppw = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,16}$/;



        
        function joinCheck(){
            if(!regExpid.test(document.actionForm.id.value)){
                alert("영문자 숫자 포함 5~10글자입니다.");
                document.actionForm.id.value="";
                document.actionForm.id.focus();
                return;
                
            }else if(!regExppw.test(document.actionForm.pw.value)){
                alert("영문자 숫자 특수문자 포함 4~16글자입니다");
                document.actionForm.pw.value="";
                document.actionForm.pw.focus();
              return;
            }

            document.actionForm.submit();
        }


        //UX 엔터키값 처리
        function enter(e){
            if(e.keyCode=="13"){
                joinCheck();

            }
        }


    </script>

</body>
</html>

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="list.board" name="joinForm">
        <h3>가입창</h3>
        아이디:<input type="text" name="id" placeholder="문자와 숫자" onkeypress="enter(event)"><br>
        비밀번호:<input type="password" name="pw" placeholder="숫자, 영문자, 특수문자 최소한개" onkeypress="enter(event)"><br>
        생략......

        <button type="button" onclick="joinCheck()">가입</button>
    </form>

    <script>
        function joinCheck() {

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

            var regExp1 = /^[A-Za-z0-9]{5,10}$/;
            var regExp2 = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/;
            
            var form = document.joinForm; //폼태그
            if( !regExp1.test( form.id.value ) ) {
                alert("영문자 숫자 5-10글자 사이입니다");
                form.id.focus();
                return;

            }else if( !regExp2.text(form.pw.value)){
                alert("영문자 숫자 특수문자 포함 4~8글자 입니다");
                form.pw.focus();
                return;
            }else{
                form.submit();
            }


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




    </script>

    
</body>
</html> -->

결과

 

 

날짜객체

 

예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var date = new Date();//현재시간
        var date = new Date(2023, 0, 4); //년월일(월은 0부터)
        var date = new Date(2023, 1, 4 , 14, 22, 0); //년월일시분초

        console.log(date);

        //날짜의 포멧형식 변환 함수
        console.log(date.toUTCString);
        console.log(date.toLocaleTimeString);
        console.log(date.toISOString);

        //년원일을 얻는 getter
        var milis = date.getTime();
        console.log(milis); //1970.1.1 ~ 현재까지 지난 시간을 밀리초

        var year = date.getFullYear();//년
        var month = date.getMonth();//월
        var day = date.getDate();//일

        var hour = date.getHours();//시간
        var minute = date.getMinutes();//분
        var seconds = date.getSeconds();//초

        console.log(year +"년" + month +"월" + day +"일" + hour + ":" + minute + ":" + seconds);
    </script>
</body>
</html>

 

결과

 

반응형

'JS | CSS | HTML' 카테고리의 다른 글

72일차 Java Script Location, History, Navigation  (0) 2023.01.05
71일차 Java Script BOM  (0) 2023.01.04
70일차 Java Script Event Object Example  (0) 2023.01.03
70일차 Java Script Event Object2  (0) 2023.01.03
70일차 Java Script Node Example2  (0) 2023.01.03

댓글

티스토리툴바