회원가입 폼
id
pwd
pwd 확인
가입버튼 누르면
id 6글자 이상 필수사항
pwd 5글자 이상
pwd 와 pwd 확인이 일치해야 함.
내 코드
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a(){
b();
c();
alert("email: " + f.email.value);
}
function b(){ // id 6글자 이상
let len = f.id.value.length;
if (len >= 6) {
alert("id: " + f.id.value);
} else {
alert("id를 6글자 이상 입력하세요.")
}
}
function c(){ // pwd 5글자 이상 & pwd == pwdCheck 확인
let len = f.pwd.value.length;
if (len >= 5) {
if (f.pwd.value == f.pwdCheck.value){
alert("pwd와 일치합니다.\npwd: "+f.pwd.value);
} else {
alert("pwd와 불일치합니다.")
}
} else {
alert("pwd를 5글자 이상 입력하세요.")
}
}
</script>
</head>
<body>
<form name = "f">
id:<input type = "text" name="id"><br/>
pwd:<input type = "password" name="pwd"><br/>
pwd 확인:<input type = "password" name="pwdCheck"><br/>
email:<input type = "text" name="email"><br/>
<input type="button" value="가입버튼" onclick="a()">
</form>
</body>
</html>
강사님 코드
- alert가 한 번만 뜸. (우선순위대로 id->pwd->pwd확인)
- 필수조건을 모두 충족하면 submit함
※ 테이블 여백 제거 (<table> <td> 여백 없애기) (표 테두리 사이 공백 없애기)
- cellspacing = "0"
- border-spacing: 0px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a(){
if(f.id.value.length<6){
alert("id는 필수이고 길이는 6이상");
return;
}
if(f.pwd1.value.length<5){
alert("pwd는 필수이고 길이는 5이상");
return;
} else {
if(f.pwd1.value != f.pwd2.value){
alert("pwd와 pwd확인이 일치해야 함");
return;
}
}
/* .submit(): 일반버튼도 서버에 submit 할 수 있게 함 */
f.submit(); // 폼 제출 함수
}
</script>
</head>
<body>
<h3>회원가입</h3>
<!-- 사용자가 입력한 데이터를 서버 페이지에 제출 -->
<!-- <form action="서버 페이지 경로" method="전송방식(get/post)"> -->
<form action="/webApp1/member/Join" method="post" name="f">
<!-- cellspacing : 표 테두리 사이의 공백 지정 -->
<table border="1" cellspacing="0">
<tr><th>ID</th><td><input type=text name="id"></td></tr>
<tr><th>PWD</th><td><input type=password name="pwd1"></td></tr>
<tr><th>PWD확인</th><td><input type=password name="pwd2"></td></tr>
<tr><th>EMAIL</th><td><input type=text name="email"></td></tr>
<tr><th>가입</th><td><input type="button" value="가입" onclick="a()"></td></tr>
</table>
</form>
</body>
</html>
Servlet
※ 한글 안깨지게
request.setCharacterEncoding("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset=EUC-KR");
package test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Join
*/
@WebServlet("/member/Join")
public class Join extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Join() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset=EUC-KR");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd1");
String email = request.getParameter("email");
//응답 페이지 생성
// 원래 Servlet에는 뷰 만들지 않음.. 아직 안배워서 함.
PrintWriter pw = response.getWriter(); //응답페이지에 출력할 출력 스트림 생성
pw.append("<html><body><h1>"); //html 문서에 써주기
pw.append("회원가입 완료<br/>");
pw.append("id: " + id + "<br/>");
pw.append("pwd: " + pwd + "<br/>");
pw.append("email: " + email + "<br/>");
pw.append("</h1></body></html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}