1. 로그인 창을 구현할 자바 클래스를 만들어 줍니다.
2. WebContent 폴더에 js폴더를 만들어 준 후 validation.js파일은 만들어줍니다.
만들어진 validation.js을 다음과 같이 작성합니다.
String.prototype.validationID = function(){
// 영문 소문자로 시작하고, 영문 소문자와 숫자로 이루어진 아이디가 6~15글자인지 체크하는 정규식
return /^[a-z]+[a-z0-9]{5,14}$/.test(this);
}
String.prototype.validationPW = function(){
// 8~20글자의 영문 대소문자, 숫자, 특수문자이고
// 1개 이상의 특수문자 또는 숫자를 포함하는지 체크하는 정규식
return /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{8,20}$/.test(this);
}
3. WebContent폴더 하위에 다음과 같이 HTML 문서를 만들어 줍니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DevEric Login Example</title>
<!-- jQuery를 CDN방식으로 import한다. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 만들어 놓은 validation.js를 import한다 -->
<script type="text/javascript" src="/DevEricServers/js/validation.js"></script>
<script type="text/javascript">
$(function(){
// submit에 대한 리스너를 선언한다.
$('form').submit(function(){
// ID의 정규식이 맞지 않을 때
if(!$("input[name=mem_id]").val().validationID()){
alert("아이디 형식이 맞지 않습니다!");
return false;
}
// PW의 정규식이 맞지 않을 때
if(!$("input[name=mem_pw]").val().validationPW()){
alert("패스워드 형식이 맞지 않습니다!")
return false;
}
// 정규식에 맞으면 submit을 실행한다.
alert("환영합니다!")
return true;
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>아이디 </td>
<td><input type="text" name="mem_id"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="text" name="mem_pw"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="로그인"></td>
</tr>
</table>
</form>
</body>
</html>
4. 위 HTML 코드를 복사하여 자바 클래스에 붙여넣은 후 다음과 같이 수정해줍니다.
Tip : alt + shift + a를 누르면 동시에 여러줄을 코딩할 수 있는 모드로 바뀝니다.
package deveric.login.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginFormController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
out.println("<!DOCTYPE html> ");
out.println("<html> ");
out.println("<head> ");
out.println("<meta charset='UTF-8'> ");
out.println("<title>DevEric Login Example</title> ");
out.println("<!-- jQuery를 CDN방식으로 import한다. --> ");
out.println("<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script> ");
out.println("<!-- 만들어 놓은 validation.js를 import한다 --> ");
out.println("<script type='text/javascript' src='/DevEricServers/js/validation.js'></script> ");
out.println("<script type='text/javascript'> ");
out.println(" $(function(){ ");
out.println(" // submit에 대한 리스너를 선언한다. ");
out.println(" $('form').submit(function(){ ");
out.println(" // ID의 정규식이 맞지 않을 때 ");
out.println(" if(!$('input[name=mem_id]').val().validationID()){ ");
out.println(" alert('아이디 형식이 맞지 않습니다!'); ");
out.println(" return false; ");
out.println(" } ");
out.println(" // PW의 정규식이 맞지 않을 때 ");
out.println(" if(!$('input[name=mem_pw]').val().validationPW()){ ");
out.println(" alert('패스워드 형식이 맞지 않습니다!') ");
out.println(" return false; ");
out.println(" } ");
out.println(" // 정규식에 맞으면 submit을 실행한다. ");
out.println(" alert('환영합니다!') ");
out.println(" return true; ");
out.println(" }); ");
out.println(" }); ");
out.println("</script> ");
out.println("</head> ");
out.println("<body> ");
out.println("<form> ");
out.println(" <table> ");
out.println(" <tr> ");
out.println(" <td>아이디 </td> ");
out.println(" <td><input type='text' name='mem_id'></td> ");
out.println(" </tr> ");
out.println(" <tr> ");
out.println(" <td>패스워드</td> ");
out.println(" <td><input type='text' name='mem_pw'></td> ");
out.println(" </tr> ");
out.println(" <tr> ");
out.println(" <td colspan='2'><input type='submit' value='로그인'></td> ");
out.println(" </tr> ");
out.println(" </table> ");
out.println("</form> ");
out.println("</body> ");
out.println("</html> ");
}
}
5. web.xml파일에 다음 코드를 추가하여 만들어 놓은 자바 클래스와 서버를 연결해줍니다.
<servlet>
<servlet-name>loginForm</servlet-name>
<servlet-class>deveric.login.controller.LoginFormController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginForm</servlet-name>
<url-pattern>/loginForm</url-pattern>
</servlet-mapping>
6. 서버를 실행시킨 후 다음과 같이 접속할 수 있습니다.
아이디와 패스워드를 정규식에 맞게 입력하면 환영합니다 메세지가 팝업됩니다.
정규식에 맞지 않는 값을 입력하면 오류 메세지가 팝업됩니다.
'Web > Servlet' 카테고리의 다른 글
| [Servlet] 웹 소켓을 이용한 채팅(update date - 2019-08-07) (15) | 2019.07.23 |
|---|---|
| [Servlet] Servlet으로 Hello World 페이지 만들기 (0) | 2019.07.04 |
| [Servlet] 로컬에 Apache Tomcat 7 세팅하기 (0) | 2019.07.04 |
댓글