1-10강 : 공백 검사 숙제와 문법

(참고) 폼 전송 막으려면 

 

e.preventDefault()

 

위 함수 추가 전=

값을 입력하세요 알림 창은 뜨지만 확인 버튼 클릭 시 전송완료~~페이지로 넘어간다.

 

위 함수 추가 후=

알림 창의 확인 버튼을 눌러도 폼이 전송되지 않는다

---

 

ese-if 문법:

1. 조건식을 연달아 쓰고 싶으면

2. 몇 번이고 연달아 사용 가능

 

 

else-if 의 조건이 참이기 때문에 콘솔 창에 맞아요2가 출력되는 것을 확인할 수 있다.

 

---

 

-오늘의 숙제-

1. 전송 누르면 아이디/비번 입력란 둘 다 공백 검사

2. 비번이 6자 미만이면 더 길게 입력하라고 안내문 띄우기(value.length)

 

 <script>

      document.getElementById('submit').addEventListener('click',function(){

        var i=document.myform.id.value 
        //form 태그에 name="myform" 값을, input 태그에 name="id" 값을 부여해줌

        var p=document.myform.pw.value.length
        //p를 비밀번호 변수로 설정해주고 .legth를 통해 비번 길이를 확인할 수 있도록 설정

        
        if(i=="" | p==""){  // id또는 pw가 공백이면
          alert('값을 입력하세요.');
        }

        if(p<6){ //pw가 6자 미만이면
          alert('비밀번호 길이를 6자 이상으로 입력해주세요.');
        } 

      })

    </script>

 

1. id/pw 값이 공백일 경우

 

2. 비번이 6자 미만일 경우

 

3. 조건 모두 만족 시

정상적으로 폼이 전송됨