2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.1 - 게시판도 HTML부터] 게시글 리스트
2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼
안녕하세요 COCY입니다.
계속해서 지난번에 만든 게시글 입력폼에대해
Javascript를 이용하여 입력값 유효성 검증을 해 보도록 하겠습니다.
말은 거창하게 유효성 검증이라 했지만 결국 값이 제대로 들어왔는지 체크하는 것입니다.
일단 이번에 쓰일 언어는 자바스크립트(Javascript)인데요 ,
자바와는 전혀 무관하지만, 기본문법은 자바나 C처럼 여타 언어들과 비슷하며,
스크립트 언어로써 HTML과 마찬가지로 웹브라우져의 엔진에서 작동합니다.
스크립트 언어 특성상 문법이 엄격하지 않고, 자유도가 넓어,
많은 라이브러리들이 존재하는 강력한 언어입니다.
그럼 자바스크립트 코드를 작성해 보겠습니다.
만드신 write.html 소스안에 </form> 바로 밑에다 아래와같이 입력합니다.
보통은 <head>테그안에 집어넣는것이 일반적인데요,
스크립트는 페이지가 순차적으로 로드되기때문에 form태그 위쪽에 소스가 위치하게되면 동작하지 않을 수 있습니다.
<script>
alert(document.forms[0].title.name);
</script>
스크립트를 열고 닫는 태그안에 alert()함수를 사용하여 뭔가를 경고창으로 띄우는 코드입니다.
실행해 보시면 title이라고 출력되는것을 보실 수 있는데요,
소스를 보면 직관적으로 만든 폼에서 title이란놈의 name값을 출력한다는 것을 아실 수 있을겁니다.
그럼 가장 먼저 나온 document라는 놈이 무엇이냐.......에 대해선 제 설명보다는 ※직접 한번 찾아보시는 것이 좋을 듯 합니다.
진행을 위해 간단히 설명하자면 html문서를 총괄하는 객체로서 dom객체라고 불립니다.
하위 객체에 접근하기 위해서는 .으로 접근하며, 아이디를 지정하고 getElementById() 함수를 사용하여 직접접근도 가능합니다.
다음 코드에서 보시면 document.forms[0] 은 문서내에서 form 태그들을 찾아 ([0] - 배열접근자라 보시면됩니다. 0부터시작)
첫번째 form객체를 선택합니다.
그다음은 title인데요 input태그에서 name속성에 지정한 값을 저렇게 직접 입력하여 접근이 가능합니다.
그리고 마지막으로 title에서 name값을 alert()함수를 통해 출력하게 되는 것입니다.
그럼 본격적으로 폼 입력값을 검사해 보도록 하겠습니다.
일단 입력값들을 검사하려면 페이지에서 값이 입력된 후에
submit버튼을 누르는 시점에서 검사가 이루어져야겠죠?
<form>태그의 코드에 다음과같이 onsubmit 이벤트를 걸어줍니다.
<form action="index.html" method="post" onsubmit="return formCheck();">
onsubmit속성은 input태그중 type이 submit인 버튼을 클릭했을때 폼을 전송하기전에 이벤트를 캐치하여
이때 동작할 자바스크립트 구문을 연결해 주는 이벤트속성입니다.
이외에도 onclick, onblur, onfocus, onkeydown 등 태그마다 많은 이벤트들이 존재하며 이는 차차 배워가도록 하겠습니다.
그러면 onsubmit이벤트가 발생했을때 formCheck()함수를 실행하도록 걸어 놓았는데요,
여기서 return은 formCheck()함수가 반환하는 boolean값을 토대로 submit을 할것인지 안 할것인지를 정하게 됩니다.
false일경우에는 submit이 중지되고, true일경우에만 동작합니다.
그럼 자바스크립트 태그로 돌아가서 alert구문을 지우고 formCheck 함수를 작성합시다.
function formCheck() {
alert(document.forms[0].title.value); // title에 입력된 값을 출력합니다.
}
실행시켜보시면 값이 출력되는 것을 보실 수 있습니다.
그럼 간단한 if문을 통해 값이 null인지 아닌지를 체크하여 null일경우 submit이 안되도록 하는 코드를 작성해봅시다.
function formCheck() { var title = document.forms[0].title.value; // 사용하기 쉽도록 변수를 선언하여 담아주고, var writer = document.forms[0].writer.value; var regdate = document.forms[0].regdate.value; var content = document.forms[0].content.value; // 추가되었습니다. 글내용 if (title == null || title == ""){ // null인지 비교한 뒤 alert('제목을 입력하세요'); // 경고창을 띄우고 document.forms[0].title.focus(); // 해당태그에 포커스를 준뒤 return false; // false를 리턴합니다. } if (writer == null || writer == ""){ alert('작성자를 입력하세요'); document.forms[0].writer.focus(); return false; } // 글작성폼에 내용을 추가하였습니다. 게시판에 글내용은 당연히 있어야겠죠? // 추가할 html코드 : content : <textarea rows="10" cols="20" name="content"></textarea><br> if (content == null || content == ""){ alert('내용을 입력하세요'); document.forms[0].content.focus(); return false; } if (regdate == null || regdate == "" ){ alert('날짜를 입력하세요'); document.forms[0].regdate.focus(); return false; }}소스가 길어졌는데요. 잘 작동 되시나요?
form은 객체이며 배열처럼 접근이 가능하다고 했습니다.
저희는 프로그램하는 사람이니까 꼼수를 부려 코드를 줄여보도록 하겠습니다.
function formCheck() {var length = document.forms[0].length-1; // submit을 제외한 모든 input태그의 갯수를 가져옴for(var i = 0; i < length; i++){ // 루프를 돌면서 if(document.forms[0][i].value == null || document.forms[0][i].value == ""){ alert(document.forms[0][i].name + "을/를 입력하세요."); // 경고창을 띄우고 document.forms[0][i].focus(); // null인 태그에 포커스를 줌 return false; }//end if}//end for설명은 주석을 참고하시면 되겠습니다.
코드가 줄어들었고, input 태그가 늘어나도 유연히 대처할 수 있는 코드이지만,
지금 사용하는 데이터타입은 text필드로 다른 데이터타입은 고려하지 않았고,
조건도 null밖엔 처리하지 못합니다. 그렇기때문에 꼭 이러한 방법이 좋다고는 볼 수 없겠습니다.
그리하여 원래 코드로 돌아가서 이번에는 작성자데이터는 이메일 형식으로,
날짜데이터를 받을때는 날짜를 숫자형식으로 받을 수 있게
정규식을 사용하여 유효성 검사를 해 보도록 하겠습니다.
※ 정규식에 관한 자세한사항은 구글링을 참조하세요.
.match(/^\d+$/ig) // 숫자인지 판별하는 정규식입니다.
.match(/^(\w+)@(\w+)[.](\w+)$/ig) // asdf@asdf.com 형식을 판별하는 정규식
.match(/^(\w+)@(\w+)[.](\w+)[.](\w+)$/ig) // asdf@asdf.co.kr 형식을 판별하는 정규식
코드는 기존의 코드에 정규식으로 검사하는 부분만 추가하였습니다.
실행해서 코드가 잘 작동하는지 확인해 보시기 바랍니다.
그럼 이제 폼 검증이 끝났으니까 데이터를 데이터베이스로 넘겨야겠죠?
데이터베이스로는 어떻게 넘길까요?
html에서 데이터베이스에 접속하는 건 무리가 있죠?
게다가 위의 코드를 실행하고 보셨듯이 index.html(리스트페이지)페이지로 넘어간 form 데이터들을 어떻게 받을수 있을까요?
아쉽게도 html과 javascript만으로는 위의 일을 하는것은 불가능합니다.
html과 javascript는 사용자가 사용하는 웹브라우저의 엔진에서 작동하기때문에 Client Side 언어(프론트 엔드)라고도 합니다.
데이터베이스와 같은 서버에 접속하기위한 언어는 아니란 말이죠.
그렇기 때문에 jsp나 php, asp같은 웹 프로그래밍언어를 사용하는 것인데요.
이를 Server Side 언어(백 엔드)라고하며,
이러한 웹언어들이 데이터베이스에 접속해서 데이터를 가져오고,
다시 html, javascript로 표현되어 웹페이지로 보여주면 그것이 웹프로그래밍이라고 할 수가 있겠습니다.
그러기 위해서는 html파일이 아닌 해당 웹언어의 확장자를 가지는 하지만 html코드를 포함한 파일이 필요한데요,
그중 저희가 할것은 바로 자바기반의 웹 프로그래밍 언어인 JSP(Java Server Page)입니다.
지금까지 사용한 html과 javascript는 웹브라우져에서 돌아가기때문에 웹서버를 구동하지 않아도 되지만,
JSP파일을 사용하기 위해서는 웹서버가 필요합니다.
하지만 이미 여러분은 웹프로젝트를 dynimic web project로 생성하여 웹서버인 tomcat으로 돌리고 있기때문에
JSP로의 전환을 위해서 다음의 코드를 각 소스의 최상단에 넣으시고
확장자만 JSP로 바꾸시면 됩니다. (제대로 동작하지 않으실 경우에는 jsp파일을 생성하시고 내용을 붙여넣기하시면 됩니다.)
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
그럼 다음시간에는 JSP로 바꾼 파일을 가지고 넘긴 form데이터를 jsp페이지에서 어떻게 받는지, 이후에는
받은 데이터를가지고 데이터베이스에는 어떻게 접속하고 저장하는지에 대해 차차 알아보도록 하겠습니다.
수고하셨습니다.
다음글 > http://cusmaker.tistory.com/49
'Lecture > Javascript-기초' 카테고리의 다른 글
| 자바스크립트를 이용한 CSS 제어 (2) | 2012.06.25 |
|---|---|
| javascript를 이용한 HTML객체 생성 (0) | 2012.06.17 |
| HTML객체에서 값 가져오기 (0) | 2012.06.02 |
| 함수의 생성과 호출 (0) | 2012.05.25 |
| document의 사용 (0) | 2012.05.19 |
