본문 바로가기
웹개발/JavaScript

[자바스크립트] 조건문 사용하기

by 철없는민물장어 2023. 1. 18.
728x90
반응형

아이디를 입력하는 칸과 전송버튼을 만들고,

아이디칸에 아무것도 입력되지 않았을 때는 경고창이 뜨도록 만들어 보자.

 

폼에 입력된 값은

$('요소명').value로 알 수 있다.

 $('.btn-primary').on('click',function(){
            if($("#user-id").val().length==0){
                alert("아이디를 입력하셔야죠");
                return false;
            }
        });

btn-primary 클래스를 가진 요소를 클릭했을 때

#user-id의 값의 길이가 0이라면 "아이디를 입력하셔야죠" 알림창 뜨게 하기.

 

if-else문은 우리가 C언어,자바 등등에서 사용하는 그 if문과 같다고 보면 된다.

 

추가로,

form태그에서 submit이벤트가 발생하기 때문에

 $('form').on('submit',function(){
            if($("#user-id").val().length==0){
                alert("아이디를 입력하셔야죠");
                return false;
            }
        });

이렇게 작성해도 된다.

 

만약 아이디가 입력되지 않았을 때 폼 전송을 막으려면

 $('form').on('submit',function(e){
            if($("#user-id").val().length==0){
                alert("아이디를 입력하셔야죠");
               	e.preventDefault();
            }
        });

이벤트리스너 콜백함수에 e라는 파라미터를 추가하고

e.preventDefault()메소드를 쓰면 된다.

 

728x90
반응형

댓글