Notice
Recent Posts
Recent Comments
Link
Coding Note
[JS] 아이디, 비밀번호 유효성 검사 본문
JavaScript를 사용해서 아이디, 비밀번호 유효성 검사하기!
+ Servlet 사용하여 입력값 받기!
구현
코드
1. HTML/CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 입력값 체크</title>
<style type="text/css">
form {
padding: 22px;
}
.formWrap {
width: 300px;
height: 150px;
border: 5px solid #CEE3F6;
}
.cBtn {
border: 2px solid #CEE3F6;
background-color: #CEE3F6;
border-radius: 5px;
width: 65px;
}
.id {
margin: 15px;
}
.btn {
margin-left: 48px;
padding: 15px;
}
</style>
<script type="text/javascript">
function loginBtn() {
var fmlogin = document.fmlogin;
var id = fmlogin.id.value;
var pwd = fmlogin.pwd.value;
if((id.length==0 || id=="")){
alert("아이디는 필수입니다.");
}else if((pwd.length==0 || pwd=="")) {
alert("비밀번호는 필수입니다.");
}
else {
fmlogin.method = "post"; //<form>태그의 전송 방식을 post로 설정함.
fmlogin.action = "logins"; //action 속성을 서블릿 매핑 이름인 logins로 설정함.
fmlogin.submit(); //자바스크립에서 서블릿으로 전송함.
}
}
</script>
</head>
<body>
<div class="formWrap">
<form name ="fmlogin" method="post" action="logins" enctype="utf-8">
아이디 <input type="text" name="id" class="id"/><br>
비밀번호 <input type="password" name="pwd"/><br>
<div class="btn">
<input type="button" value="로그인" class="cBtn" onclick="loginBtn()">
<input type="reset" value="재입력" class="cBtn">
//주소값
<input type="hidden" name="addr" value="서울시 강남구">
</div>
</form>
</div>
<!-- formWrap -->
</body>
</html>2. Servlet
@WebServlet("/logins")
public class loginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void init(ServletConfig config) throws ServletException {
System.out.println("init메서드 호출");
}
public void destroy() {
System.out.println("destroy메서드 호출");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String id =request.getParameter("id");
String pwd =request.getParameter("pwd");
String addr =request.getParameter("addr");
System.out.println("아이디 : "+id);
System.out.println("비밀번호 : "+pwd);
System.out.println("주소 : "+addr);
String data= "<html>";
data += "<body>";
data += "아이디 : "+ id;
data += "<br>";
data += "패스워드 : " + pwd;
data += "<br>";
data += "주소 : " + addr;
data += "<br>";
data += "</body>";
data +="</html>";
out.print(data); //HTML 태그 문자열을 웹 브라우저로 출력함.
}
}
+ Console 출력
결과
< 공부하기 >
1. 서블릿 생명주기(Life Cycle) 메서드
1) init() 메서드
- 초기화 작업 수행함
- 서블릿 요청 시 맨 처음 한 번만 호출됨
2) doGet() 메서드
- 작업 수행함.
- 서블릿 요청 시 매번 호출됨
3) doPost() 메서드
- 작업 수행함
- 실제로 클라이언트가 요청하는 작업을 수행함
4) destroy() 메서드
- 종료 작업 수행함.
- 메모리에서 소멸될 때 호출됨
- 마무리 작업을 주로 수행함
=> init()와 destroy() 메서드는 생략 가능, doxxx() 메서드는 반드시 구현해야 함.
2. PrintWriter 클래스
- 출력 메서드를 지원함
- 서블릿 생명주기에 따라 생성된 요청 객체와 응답 객체는 doGet메서드를 html 콘텐츠를 생성하는데
이때 원하는 내용을 출력함
'Web > JavaScript' 카테고리의 다른 글
| REST 개념 정리 (0) | 2022.03.13 |
|---|---|
| [JS] 이메일 유효성 검사하기 (0) | 2022.01.30 |
| [JS] radio 속성을 이용해 사이트 이동하기 (0) | 2022.01.28 |
| [JS] 버튼 클릭 시 <div> 텍스트 생성, 삭제, 숨김 (0) | 2022.01.28 |
| [JS] 구구단 출력하기 (0) | 2022.01.27 |
'Web/JavaScript' Related Articles
more
Comments