1. 로그인 (유효성 검증, 파일 분리)
입력 양식 - 로그인 폼
입력 양식, 폼 태그, 폼 객체 사용자에게 정보를 입력받는 요소 사용자에게 입력받은 데이터를 전달하는 방식에는 GET, POST 두 가지가 있는데, 주소를 변경하지 않고 보안을 유지하며 데이터를
kiwikiwisae.tistory.com
이전에 생성한 로그인 폼에 자바스크립트의 기능을 추가하기 두 가지를 수정하여 아래 코드로 진행을 한다.
- 유효성 검증 required 은 자바스크립트 기능으로 구현할 예정이기 때문에 삭제
- 아이디와 비밀번호 폼에 각각 name, id값을 추가 (id, passwd)
<form method="post" action="login.jsp">
<table align=center>
<caption>로그인</caption>
<tr>
<td align=center>ID</td>
<td>
<input type= size=20 maxlength=10 autofocus="autofocus"
name="id" passwd="id">
</td>
</tr>
<tr>
<td align=center>PW</td>
<td>
<input type="password" size=20 name="passwd" id="passwd">
</td>
</tr>
<tr><td><br></tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="로그인">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
기존에 require 태그로 유효성 검증을 해서
ID와 PW 폼에 값을 입력하지 않으면 안되도록 했지만,
이번엔 자바스크립트로 기능을 추가한다.
head 영역에 유효성 검증을 위한 함수를 작성한다.
<head>
<script>
function check() {
var id = document.getElementById("id");
var passwd = document.getElementById("passwd");
if(id.value == "") {
alert("ID를 입력하세요");
id.focus();
return false;
}
if(passwd.value == "") {
alert("비밀번호를 입력하세요");
passwd.focus();
return false;
}
}
</script>
</head>
이렇게 유효성 검증 함수와 입력 양식을 한 파일에 작성해도 상관없지만,
유효성 검증 함수를 다른 파일로 분리해보았다.
login.js를 생성, head의 유효성 검증 함수인 check() 부분만 저장한다.
이 때, js파일에는 오로지 함수만 저장해야 한다.
그리고 check()가 빠진 부분에는 login.js파일을 불러오는 코드를 작성한다.
이 때, 다음 코드를 그대로 사용하기 위해서는 로그인폼 파일과 login.js파일은 같은 폴더에 위치해야 한다.
<script src="login.js"> </script>
2. 게시판 (유효성 검증, 파일 분리)
입력 양식 - 게시판
1. 가장 상단에 폼 태그를 입력하고 값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다. 내용 2. 이제 폼 태그 사이의 내용을 입력해본다. 레이아웃을 쉽게 제어하기 위해 테이블
kiwikiwisae.tistory.com
작성자, 비밀번호, 제목, 내용 중 하나라도 입력을 하지 않으면
작성 버튼을 눌렀을 때 경고창이 뜨면서 커서가 해당 창에 있도록 하는 기능을 자바스크립트로 추가해본다.
* 폼에 대한 기능을 모두 작성하고 실행하는 것보다는
하나 완성 할 때마다 실행해보고 또 다른 것을 작업하는 것이 에러 발견하기에 용이하다.
html로 작성한 기존 코드 (body 영역에 작성했음)
<table border=1 width=500 align=center>
<caption>게 시 판</caption>
<tr>
<th>작성자</th>
<td><input type="text" size=20 name="writer" id="writer" placeholder="작성자명 입력"> </td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" size=20 name="passwd" id="passwd"
placeholder="2~8자 이내 입력"></td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" size=50 name="subject" id="subject"
placeholder="제목을 입력하세요"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50"
name="content" id="content"
placeholder="내용을 입력하세요"></textarea></td>
</tr>
<tr>
<th>파일첨부</th>
<td><input type="file" name="myfile" id="myfile"></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="작성">
<input type="reset" value="취소">
</td>
</tr>
</table>
폼 태그 안에 onSubmit 이벤트를 추가한다.
<form method="post" action="board.jsp" onSubmit="return check()">
head 영역에 유효성 검증을 위한 함수를 작성한다.
- 작성자, 비밀번호, 제목, 내용 넷 중 하나라도 공란인 상태로 작성 버튼을 누를 경우 경고창 띄움
- 비밀번호는 2~8자 길이를 지켜야 하고 그러지 않았을 때에는 경고창을 띄우고 초기화
- 제목은 50자 이하로 입력해야 하고 그러지 않았을 때에는 경고창을 띄우고 초기화
- 내용은 200자 이하로 입력해야 하고 그러지 않았을 때에는 경고창을 띄운다.
function check() {
var writer = document.getElementById("writer");
var passwd = document.getElementById("passwd");
var subject = document.getElementById("subject");
var content = document.getElementById("content");
if (writer.value == "") {
alert("작성자를 입력하세요.");
writer.focus();
return false;
}
if (passwd.value == "") {
alert("비밀번호를 입력하세요.");
passwd.focus();
return false;
}
if (passwd.value.length < 2 || passwd.value.length > 8 ) {
alert("2~8자 길이로 입력하세요.");
passwd.value = ""; // 입력한 비번 초기화
passwd.focus();
return false;
}
if (subject.value == "") {
alert("제목을 입력하세요.");
subject.focus();
return false;
}
if (subject.value.length > 50 ) {
alert("제목을 50자 미만 길이로 입력하세요")
subject.value = "";
subject.focus();
return false;
}
if (content.value == "") {
alert("내용을 입력하세요.");
content.focus();
return false;
}
if (content.value.length > 200) {
alert("내용을 200자 미만 길이로 입력하세요");
content.focus();
return false;
}
}
로그인과 마찬가지로 board.js 파일을 생성,
유효성 검증을 위해 작성한 check() 함수 부분만 빼내 board.js 파일에 저장한다.
그리고 check()가 빠진 부분에는 board.js파일을 불러오는 코드를 작성한다.
게시판폼 파일과 board.js파일은 같은 폴더에 위치해야 한다.
3. 회원가입 (유효성 검증, 파일 분리)
입력 양식 - 회원가입
1. 가장 상단에 폼 태그를 입력하고 값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다. 지금은 폼만 만들지만, 추후 자바스크립트나 제이쿼리에서 각 기능을 추가할 예정이다.
kiwikiwisae.tistory.com
html로 작성한 기존 코드 (body 영역에 작성했음)
<form method="post" action="member.jsp">
<table border=0 width=700 align=center>
<caption>회원가입 폼</caption>
<tr>
<th>ID</th>
<td>
<input type="text" name="id" id="id" autofocus>
<input type="button" value="중복검사"> </td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" id="passwd"></td>
</tr>
<tr>
<th>성명</th>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<th>주민번호</th>
<td><input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
-
<input type="password" size=7 maxlength=7 name="jumin2" id="jumin2"></td>
</tr>
<tr>
<th>E-mail</th>
<td><input type="text" size=10 name="mailid" id="mailid">
@
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="naver.com">네이트</option>
<option value="gmail.com">지메일</option>
</select></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type=tel1 size=4 maxlength=4 name="tel1" id="tel1">
-
<input type=tel2 size=4 maxlength=4 name="tel2" id="tel2">
-
<input type=tel3 size=4 maxlength=4 name="tel3" id="tel3"></td>
</tr>
<tr>
<th>휴대폰</th>
<td>
<select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
</select>
-
<input type=phone2 size=4 maxlength=4 name="phone2" id="phone2">
-
<input type=phone3 size=4 maxlength=4 name="phone3" id="phone3"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type="text" size=5 maxlength=5 name="post" id="post">
<input type="button" value="우편번호 찾기"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" size=70 name="address" id="address"></td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="공부" checked="checked">공부
<input type="checkbox" name="hobby" value="영화">영화
<input type="checkbox" name="hobby" value="그림">그림
<input type="checkbox" name="hobby" value="음악">음악
<input type="checkbox" name="hobby" value="고양이">고양이
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows="5" cols="70" name="intro" id="intro"
placeholder="자기소개를 입력해주세요."></textarea>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
추가할 기능
- ID 중복검사 버튼에 기능을 추가한다. 클릭 시 1) 공란인지 2)중복아이디인지 검증하는 두 가지 경우를 작성
- 주민번호 앞자리 6개를 입력하면 자동으로 뒷자리 항목으로 커서 이동
- E-mail 에서 도메인 입력 text폼을 새로 추가하고, 도메인을 선택하면 자동으로 입력되도록 설정
- 휴대폰 앞자리 번호에 대한 유효성 검사
- 우편번호 찾기를 클릭하면 검색할 수 있도록 팝업창 이벤트 추가 (api)
- 우편번호 팝업창에서 검색을 완료하면 우편번호와 주소가 자동 입력되도록 하는 기능 추가
- 성별에 대한 유효성 검증
- 취미는 2개 이상 선택해야 하도록
- 자기소개는 100자 이내로 입력
수정 사항
- E-mail에 도메인 텍스트 폼을 추가하고 id와 name 값을 "domain"으로 지정
- E-mail의 Select 폼에 id 값을 추가 (email)
- 성별 각 항목에 id 값을 추가 (각각 male, female)
- 취미의 각 항목에 id값을 추가
이제 head 영역에 함수를 작성해야 하는데,
로그인과 게시판의 경우와는 달리 (함수 하나에 모든 내용을 다 적어넣음)
각 폼에 맞춰 여러개의 함수를 작성한다.
1) ID 중복검사를 하기 위한 함수 idcheck()
2) 주민번호 뒷자리로 포커스를 이동하기 위한 함수 move()
3) 도메인 선택을 위한 함수 sel()
4) 우편번호 찾기 api 추가
5) 전체적으로 유효성 검사를 하기 위한 함수 check()
1) idcheck() ID 중복검사 버튼에 기능을 추가한다.
클릭 시 공란일 경우, 중복아이디인지 확인하는 경우
이 두 가지 경우로 작성한다.
function idcheck() {
var id = document.getElementById("id");
if (id.value == "") {
alert("ID를 입력하세요")
id.focus();
return false;
} else {
var ref = "idcheck.jsp?id="+id.value;
window.open(ref, "idcheck", "width=300, height=200");
}
}
body 영역에 작성된 ID 중복검사 버튼에 onClick 이벤트 내용을 작성한다.
클릭 시 idcheck() 함수를 실행한다.
<input type="button" value="중복검사">
↓
<input type="button" value="중복검사" onClick="idcheck()">
아이디를 입력하지 않은 경우 경고창을 띄운다.
아이디를 입력한 경우 idcheck.jsp를 실행하는데 이 문서를 아직 작성하지 않았으므로 404에러 페이지가 뜬다.
폼을 통해서 값을 전송할 때에는 get / post 방식을 선택할 수 있는데,
창을 새로 띄울 때에는 get 방식으로만 가능하다.
그리고 memberform.html과 member.js 가 함께 저장된 폴더에 idcheck.jsp 파일을 생성해 다음 내용을 작성했다.
아직 jsp를 배우지 않았으므로 대략적인 설명만 들어서는 잘 모르겠다..
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
%>
ID : <%=id%> <!-- 브라우저에 출력시킨다. -->
이 코드에서 getParameter("id") 는 var ref = idcheck.jsp?id="+id.value 에서 물음표 다음의 id 이다.
여기까지 저장하고 중복검사를 실행해보면 404 에러가 뜨던 아까와는 다르게
입력 양식에 입력한 아이디가 뜬다.
자바스크립트에서 할 수 있는 기능 구현은 여기까지 이고 이후로는 jsp를 배울 때 마저 구현해보기로 한다.
2) move() keyup 이벤트를 통해 주민번호 앞자리 6개를 입력하면 자동으로 뒷자리 항목으로 커서 이동하는 기능을 추가한다.
먼저, body 영역의 주민번호 앞자리 폼에 이벤트 핸들러를 작성한다.
<input type="text" size=6 maxlength=6 name="jumin1" id="jumin1">
↓
<input type="text" size=6 maxlength=6 name="jumin1" id="jumin1" onKeyup="move()">
이 함수가 없으면
주민번호 앞자리 폼에 한글자라도 작성하는 순간 주민번호 뒷자리 폼으로 커서가 넘어가 버린다.
그러니 6번째 글자를 입력하고 키를 떼는 순간 포커스를 이동하는 내용을 작성한다.
function move() {
var jumin1 = document.getElementById("jumin1");
var jumin2 = document.getElementById("jumin2");
if (jumin1.value.length == 6) {
jumin2.focus();
}
}
3) sel() E-mail 에서 도메인 입력 text폼을 새로 추가했고,
도메인을 선택하면 자동으로 입력되도록 설정하는 것은 change 이벤트로 한다.
body 영역의 E-mail Select 폼에 이벤트 핸들러를 추가한다.
<select id="email">
↓
<select id="email" onChange="sel()">
move함수의 내용을 작성한다.
(1) 직접 입력 선택 시 - domain폼을 초기화한다.
(2) 직접 입력 외 다른 선택 시 - 해당 사이트의 도메인을 domain폼에 자동 입력한다.
function sel() {
var domain = document.getElementById("domain");
var email = document.getElementById("email");
if (email.value == "") { // (1) 직접 입력 선택
domain.value = "";
domain.focus();
domain.readOnly = false;
} else { // (2) 도메인 선택
domain.value = email.value;
domain.readOnly = true; // 도메인 선택 시 값을 수정할 수 없도록 한다
}
}
else에만 readOnly = true; 값을 넣었을 때 발생하는 문제는
도메인을 선택했다가 직접입력을 선택했을 경우 readOnly = true가 계속 활성화 되어 있다.
그래서 domain 폼에 값을 입력할 수가 없게 된다.
그렇기 때문에 (1) 코드에 꼭 읽기 전용을 비활성화 해주는 코드를 넣어주어야 한다.
4) 우편번호 찾기 검색 버튼에 api 기능 추가
이 코드를 head 영역의 title 바로 아래에 복사-붙여넣기 한다.
다음에서 서비스 하는 주소 검색 기능을 추가한다.
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function openDaumPostcode() {
new daum.Postcode({
oncomplete : function(data) {
document.getElementById('post').value = data.zonecode;
document.getElementById('address').value = data.address;
}
}).open();
}
</script>
body영역의 우편번호 찾기 버튼에 클릭 이벤트를 지정한다.
<input type="button" value="우편번호 찾기">
↓
<input type="button" value="우편번호 찾기" onClick="openDaumPostcode()">
잘 실행된다.
5)check() 너무 길어서 코드 블럭 대신 접은글로 첨부.
더보기
function check() {
이렇게 코드가 너무 길어지기 때문에 외부 파일로 따로 빼는 것이 확실히 편할 것 같다.
member.js 파일을 생성, 함수들을 모두 그곳에 따로 저장한다. (우편번호 찾기 api는 그대로 둔다.)
함수 여러개를 한꺼번에 저장하는 것은 괜찮지만 function을 중첩으로 작성하는 것은 안된다.
html문서에서 함수들이 빠진 부분에는 member.js파일을 불러오는 코드를 작성한다.
회원가입폼 파일과 member.js파일은 같은 폴더에 위치해야 한다.
