JS 이벤트 처리 - 3(forms)

 💡 학습 목표
문서에서 form 에 접근 방법onsubmit 에 대한 이해validation에 이해

시나리오 코드 1

        function check() {
            let form1 = document.forms[0];
            let form2 = window.document.forms[1];
            
            // 자바스크립트를 통해서 요소 복사 처리 
            form2.elements["name"].value = form1.elements["name"].value;
            form2.elements["tel"].value = form1.elements["tel"].value;
            console.log("form1", form1);
        }

        function send() {
            // 유효성 검사가 전부 true 라면 
            if( validationFrom() ) {
                // form 에 submit() 메서드를 호출하면 자바스크립트에서 서버측으로 제출할 수 있다. 
                document.forms[1].submit();
            }
        }

        function validationFrom() {
            
            let form2 = document.forms[1];
            let name = form2.elements["name"].value;
            let tel = form2.elements["tel"].value;
             
            let  isOk = true; 
            //console.log("name", name);
            //console.log("tel", tel);
            console.log(typeof name);
            console.log(typeof tel);

            if(!name) {
                alert("이름을 입력하세요");
                isOk = false; 
                return ;
            }
            if(!tel) {
                alert("연락처를 입력하세요");
                isOk = false; 
                return ;
            }
            // 정규표현식 (숫자, 010으로 시작 하는가.. GPT)
            if(tel.length < 3 ) {
                alert("올바른 연락처를 입력하세요");
                isOk = false; 
                return ;
            }
            return isOk;
        }

    

1. 문서에서 form에 접근 방법:
   • JavaScript에서는 **document.forms**를 통해 페이지 내의 모든 폼 요소에 접근할 수 있습니다. 이는 HTMLFormElement의 HTMLCollection입니다. 예를 들어, **document.forms[0]**은 페이지 내의 첫 번째 폼 요소에 접근하고, **document.forms[1]**은 두 번째 폼 요소에 접근합니다.
   • 폼 내의 입력 요소에 접근하기 위해 elements 속성을 사용할 수 있습니다. 예: **document.forms[0].elements["name"]**는 첫 번째 폼의 name 속성을 가진 입력 요소에 접근합니다.
2. onsubmit에 대한 이해:
   • onsubmit 이벤트는 폼이 제출될 때 발생합니다.
   • 폼의 onsubmit 속성에 "return false;"를 설정하면, 폼이 실제로 제출되지 않습니다. 이는 페이지가 새로고침되는 것을 방지합니다. 일반적으로, 이 방법은 JavaScript를 통해 추가 유효성 검사를 수행하거나 AJAX를 사용하여 폼 데이터를 제출할 때 유용합니다.
3. validation에 대한 이해:
   • 유효성 검사(validation)는 사용자가 입력한 데이터가 올바른 형식인지 확인하는 과정입니다.
   • JavaScript에서는 유효성 검사를 수행하여 사용자에게 오류 메시지를 표시하거나, 올바른 데이터만 서버로 전송할 수 있습니다.
   • 예제에서는 validationForm() 함수가 유효성 검사를 수행합니다. 이름이 비어 있거나, 연락처가 숫자가 아닌 경우 경고 메시지를 표시합니다.