메뉴 건너뛰기

조회 수 3435 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

▶▷ 알아두면 좋은 것들

조건문, 조건문에서의 and와 or, alert 메소드

 

 회원가입 폼을 만들고 나서 submit을 통한 자료 전송시에, 모든 폼이나 혹은 일부에 필수로 데이터가 입력되어야 할때,

사용가능한 유효성 검사 방법입니다. 그렇게 어려운 방법은 아니니 한번 보시고 이해 하시면 될듯 합니다 ^^.

 

 이번에는 두가지 소스를 확인하면서 내용을 설명토록 할게요.

첫번째단순히 모든 폼에 값이 입력되었는지만 확인하는 소스구요.

두번째모든 폼에 값이 입력되었는지 확인하고, 그렇지 않은 폼에 이동을해서 바로 수정이 가능하도록 하겠습니다.

 


첫번째 소스(Source)

소스다운  Doit.html

 

<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 유효성 검사1</TITLE>
</HEAD>
<SCRIPT language="javaScript">

 function check_onclick(){
    theForm=document.frm1;  
1.  if(theForm.input1.value=="" || theForm.input2.value=="" || theForm.input3.value=="" ){
        alert("필수 입력란이 비었습니다. 확인해 주세요.");
    }else{
       alert("필수 입력란을 모두 입력하셨습니다.");
    }
 }

</SCRIPT>
<BODY>
<FORM name=frm1>
     필수 입력란1 : <input type=text name=input1 size=10> <br>
     필수 입력란2 : <input type=text name=input2 size=10> <br>
     필수 입력란3 : <input type=text name=input3 size=10> <br>
     보통 입력란4 : <input type=text name=input4 size=10>(생략가능) <br>
     <input type=button value="check" onclick="check_onclick()">
</FORM>
</BODY>

</HTML>

 


소스설명

1. 필수 입력란 값 확인
if(theForm.input1.value=="" || theForm.input2.value=="" || theForm.input3.value=="" )
- if 조건문에서 theForm-여기서는 <BODY>태그내에 있는 'frm1'의 이름을 가진 폼을 의미합니다.-의 각 하위 요소인 각 텍스트 입력란의 값이 현재 비어있을때, 널(null) 즉, 화면상에서는 "" 일때 조건문이 참이 되도록 하여서 메시지를 출력 하도록 하였구요, 필수로 들어가야 할 입력란을 동일한 방법으로 나열하되 OR조건으로 나열했습니다. 그래야 나열된 조건들 중에 하나라도 값이 비어있는 것이 있으면, 바로 해당 메시지를 출력하죠.
 
 

 
결과화면
 
 

 
 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

무언가 아쉽지 않으세요?

어디가 비었는지 웹페이지가 알고,

입력이 가능하도록 그곳으로 커서를 위치하게 하면 좋겠죠?

그래서 다음 소스를 준비했습니다.


 두번째 소스(Source)

 소스다운   Doit.html

<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 유효성 검사2</TITLE>
</HEAD>
<SCRIPT language="javaScript">

 function check_onclick(){
      theForm=document.frm1;
1.    if(theForm.input1.value=="" || theForm.input2.value=="" || theForm.input3.value=="" ){
           if(theForm.input1.value==""){
                alert("필수 입력란1이 비어있습니다. 확인해주세요.")
                theForm.input1.focus();
           }else if(theForm.input2.value==""){
                alert("필수 입력란2이 비어있습니다. 확인해주세요.")
                theForm.input2.focus();
           }else{
                alert("필수 입력란3이 비어있습니다. 확인해주세요.")
                theForm.input3.focus();
           }
      }
      else{
           alert("필수 입력란을 모두 입력하셨습니다.");
      }
 }

</SCRIPT>
<BODY>
<FORM name=frm1>
     필수 입력란1 : <input type=text name=input1 size=10> <br>
     필수 입력란2 : <input type=text name=input2 size=10> <br>
     필수 입력란3 : <input type=text name=input3 size=10> <br>
     보통 입력란4 : <input type=text name=input4 size=10>(생략가능) <br>
     <input type=button value="check" onclick="check_onclick()">
</FORM>

</BODY>
</HTML>

 


소스설명

1. 필수 입력란의 재검사와 포커싱

if(theForm.input1.value=="" || theForm.input2.value=="" || theForm.input3.value=="" ){
    if(theForm.input1.value==""){
         alert("필수 입력란1이 비어있습니다. 확인해주세요.")
         theForm.input1.focus();
    }else if(theForm.input2.value==""){
         alert("필수 입력란2이 비어있습니다. 확인해주세요.")
         theForm.input2.focus();
    }else{
         alert("필수 입력란3이 비어있습니다. 확인해주세요.")
    theForm.input3.focus();
    }
}

- if문입니다. 맨 위에 있는 조건문은 첫번째 소스의 조건문과 동일하구요,

다른 점은 각 입력란 마다 다시 유효성 검사를 했다는 겁니다. 그럼 맨 위의 조건은 필요없지 않나?라는 질문이 있을수도 있는데요, 이렇게 함으로써 이벤트가 일어났을때 좀 덜 코드를 읽도록 하기 위해서 입니다. 아무튼 다시 돌아와서,

 

 각 란이 비어있으면, 메시지를 각각 띄우고, focus() 메소드를 통해서 비어있는 칸으로 이동하게 했습니다.

focus()에 대한 자세한 내용은 http://runtoyourdream.tistory.com/202 을 확인해주시면 되겠습니다.

 


결과화면

 

 

 이상 글을 마치겠습니다. 다음번에는 입력란에 정해진 타입의 값만 들어가보도록 할게요 ^^

 

 


List of Articles
번호 제목 날짜 조회 수
125 JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소 file 2016.09.11 3690
124 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 3410
123 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.08 4286
122 모바일 홈페이지로 자동 이동하는 방법.... 2016.09.01 4077
121 이동 가능한 레이어팝업 소스 2016.09.01 4203
120 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 4083
119 이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload ) file 2015.06.19 4637
118 iframe사용시 높이 자동 조절 2015.06.19 3739
117 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 4189
116 자바스크립트 아이디 기억하기 기능 구현 (쿠키저장) file 2015.06.19 6128
115 공백 검사 함수 2015.06.19 5589
114 자바스크립트 API 문서 2015.06.19 6780
113 JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 ) file 2015.06.19 3629
112 창 크기 최대화 시키기 file 2015.06.19 7028
111 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그) file 2015.06.19 3655
110 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 5042
109 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 4167
108 핸드폰 번호 일부 마스킹크 작업 (정규식 이용) 2015.06.19 6262
107 예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar) 2015.06.19 6830
106 마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인) 2015.06.19 5226
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved