use jsp_model2 create table member( name varchar(12), id varchar(12) primary key, passwd varchar(12), age int, email varchar(30) unique, gender char(1) ); insert into member values(‘관리자’, ‘admin’, ‘1234’, 20, ‘admin@admin.com’, ‘여’);
varchar 는 variable character로 공간할당이 자유로움!
======== vo 패키지에 MemberBean.java 만들기
package vo; public class MemberBean { /* * 회원 한 명의 정보를 저장하는 DTO 객체 = 자바빈(JavaBean) * * DB 및 테이블 생성 * --------------------------------- * USE jsp_model2 // 이미 만든 DATABASE * CREATE TABLE member( name VARCHAR(12), id VARCHAR(12) PRIMARY KEY, passwd VARCHAR(12), age INT, email VARCHAR(30) UNIQUE, gender CHAR(1) ); * --------------------------------- */ privateString name; privateString id; privateString passwd; privateint age; privateString email; privatechar gender; public MemberBean() {} public MemberBean(String name, String id, String passwd, int age, String email, char gender) { this.name = name; this.id = id; this.passwd = passwd; this.age = age; this.email = email; this.gender = gender; } publicString getName() { return name; } publicvoid setName(String name) { this.name = name; } publicString getId() { return id; } publicvoid setId(String id) { this.id = id; } publicString getPasswd() { return passwd; } publicvoid setPasswd(String passwd) { this.passwd = passwd; } publicint getAge() { return age; } publicvoid setAge(int age) { this.age = age; } publicString getEmail() { return email; } publicvoid setEmail(String email) { this.email = email; } publicchar getGender() { return gender; } publicvoid setGender(char gender) { this.gender = gender; } }
생성자랑 getter/setter 만들어주기
======== action 패키지에 MemberLoginProAction.java 만들기
// isMember 가 false 일 경우 // 자바스크립트를 활용하여 "로그인 실패!" 출력 후 이전페이지로 이동 // 아니면 index.jsp 페이지로 이동 if(!isMember) { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println("<script>"); out.println("alert('로그인 실패!')"); out.println("history.back()"); out.println("</script>"); } else { System.out.println("로그인 성공"); forward = new ActionForward(); forward.setPath("index.jsp"); }
추가
> false 일 경우
alert 창 띄운 후
다시 로그인창으로 이동
> true 일 경우 메인으로 이동함
======== dao 패키지에 MemberDAO.java 만들기
package dao; import java.sql.Connection; public class MemberDAO { private MemberDAO() {} private static MemberDAO instance; public static MemberDAO getInstance() { // Getter 자동생성 if(instance == null) { instance = new MemberDAO(); } return instance; } Connection con; public void setConnection(Connection con) { this.con = con; } }
<script type="text/javascript"> // 4 ~ 12 자리 영문, 숫자 조합의 ID 값을 전달받아 유효성 검사 function checkId() { // 정규표현식을 사용하여 검사할 규칙 설정(다음 두 가지 문법 중 하나 택) // var regex = new RegExp("정규표현식문자열"); // 또는 // var regex = 정규 표현식 문자열 // ID 에 대한 정규표현식 설정 // => 첫글자 영문자, 두번째부터 영문자, 숫자 조합 3 ~ 11자리(총합 4 ~ 12자리) var regex = /^[A-Za-z][A-Za-z0-9]{3,11}$/g; // 자바스크립트에서 정규표현식 판별을 위해서는 // 정규표현식문자열.exec(검사데이터) (변수명.실행(검사데이터)) // => 판별 결과가 true 또는 false 로 리턴됨 if(regex.exec(document.joinform.id.value)) { // 유효성 검사 결과가 true 일 경우 alert('사용 가능한 ID'); returntrue; } else { // 유효성 검사 결과가 false 일 경우 alert('ID 는 4 ~ 12 자리 영문, 숫자 조합 필수!'); returnfalse; } } </script>
스크립트 추가
폼액션에 onsubmit=”” 넣기
> 실행했을 때
이렇게 alert 창이 떠야함!
// 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합의 Passwd 값을 전달받아 유효성 검사 function checkPasswd() { var passwd = document.joinform.passwd.value; // 패스워드 체크 // 1. 길이 체크 : 영문, 숫자, 특수문자(!@#$%) 조합 4~12 자리 // 2. 대문자 포함 체크 : // 3. 소문자 포함 체크 : // 4. 숫자 포함 체크 : // 5. 특수문자 포함 체크 : var lengthRegex = /[A-Za-z0-9!@#$%]{4,12}/; var upperCaseRegex = /[A-Z]/; var lowerCaseRegex = /[a-z]/; var digitRegex = /[0-9]/; var specRegex = /[!@#$%]/; // 1 ~ 5번까지의 모든 조건이 만족하면 통과, 아니면 실패 if(lengthRegex.exec(passwd)&&upperCaseRegex.exec(passwd) &&lowerCaseRegex.exec(passwd)&&digitRegex.exec(passwd) &&specRegex.exec(passwd)) { // 유효성 검사 결과가 true 일 경우 alert('사용 가능한 패스워드'); returntrue; } else { // 유효성 검사 결과가 false 일 경우 alert('pw는 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합 필수!'); returnfalse; } }
이렇게 alert 창 뜸
### tip
this 를 넘겨주면 joinform 자체가 넘어감!
// 아이디와 패스워드를 모두 체크하여 정상이면 true 리턴, 아니면 false 리턴 function check() { if(checkId() && checkPasswd()) { returntrue; } else { returnfalse; } }
check() 로 변경
onkeyup=”” / div 태그 추가
// 4 ~ 12 자리 영문, 숫자 조합의 ID 값을 전달받아 유효성 검사 function checkId(idForm) { var id = idForm.value; // id 가져오기 // ID 입력 항목에 대한 해당 태그 element 가져오기(checkIdResult) var element = document.getElementById('checkIdResult'); // ID 에 대한 정규표현식 설정 // => 첫글자 영문자, 두번째부터 영문자, 숫자 조합 3 ~ 11자리(총합 4 ~ 12자리) var regex = /^[A-Za-z][A-Za-z0-9]{3,11}$/g; // 자바스크립트에서 정규표현식 판별을 위해서는 // 정규표현식문자열.exec(검사데이터) (변수명.실행(검사데이터)) if(regex.exec(id)) { // 유효성 검사 결과가 true 일 경우 element.innerHTML = "사용 가능"; } else { element.innerHTML = "사용 불가"; } }
사용가능 / 사용불가
패스워드도 똑같이 onkeyup=”” 과 div 태그 추가
// 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합의 Passwd 값을 전달받아 유효성 검사 function checkPasswd(passwdForm) { var passwd = passwdForm.value; // 패스워드 가져오기 // Passwd 입력 항목에 대한 해당 태그 element 가져오기(checkPasswdResult) var element = document.getElementById('checkPasswdResult'); // 패스워드 체크 // 1. 길이 체크 : 영문, 숫자, 특수문자(!@#$%) 조합 4~12 자리 // 2. 대문자 포함 체크 : // 3. 소문자 포함 체크 : // 4. 숫자 포함 체크 : // 5. 특수문자 포함 체크 : var lengthRegex = /[A-Za-z0-9!@#$%]{4,12}/; var upperCaseRegex = /[A-Z]/; var lowerCaseRegex = /[a-z]/; var digitRegex = /[0-9]/; var specRegex = /[!@#$%]/; // 1 ~ 5번까지의 모든 조건이 만족하면 통과, 아니면 실패 if(lengthRegex.exec(passwd)&&upperCaseRegex.exec(passwd) &&lowerCaseRegex.exec(passwd)&&digitRegex.exec(passwd) &&specRegex.exec(passwd)) { // 유효성 검사 결과가 true 일 경우 element.innerHTML = "사용 가능"; } else { element.innerHTML = "사용 불가"; } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>회원가입 페이지</title> <script type="text/javascript"> /* // 4 ~ 12 자리 영문, 숫자 조합의 ID 값을 전달받아 유효성 검사 function checkId() { // 정규표현식을 사용하여 검사할 규칙 설정(다음 두 가지 문법 중 하나 택) // var regex = new RegExp("정규표현식문자열"); // 또는 // var regex = 정규 표현식 문자열 // ID 에 대한 정규표현식 설정 // => 첫글자 영문자, 두번째부터 영문자, 숫자 조합 3 ~ 11자리(총합 4 ~ 12자리) var regex = /^[A-Za-z][A-Za-z0-9]{3,11}$/g; // 자바스크립트에서 정규표현식 판별을 위해서는 // 정규표현식문자열.exec(검사데이터) (변수명.실행(검사데이터)) // => 판별 결과가 true 또는 false 로 리턴됨 if(regex.exec(document.joinform.id.value)) { // 유효성 검사 결과가 true 일 경우 alert('사용 가능한 ID'); return true; } else { // 유효성 검사 결과가 false 일 경우 alert('ID 는 4 ~ 12 자리 영문, 숫자 조합 필수!'); return false; } } // 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합의 Passwd 값을 전달받아 유효성 검사 function checkPasswd() { var passwd = document.joinform.passwd.value; // 패스워드 체크 // 1. 길이 체크 : 영문, 숫자, 특수문자(!@#$%) 조합 4~12 자리 // 2. 대문자 포함 체크 : // 3. 소문자 포함 체크 : // 4. 숫자 포함 체크 : // 5. 특수문자 포함 체크 : var lengthRegex = /[A-Za-z0-9!@#$%]{4,12}/; var upperCaseRegex = /[A-Z]/; var lowerCaseRegex = /[a-z]/; var digitRegex = /[0-9]/; var specRegex = /[!@#$%]/; // 1 ~ 5번까지의 모든 조건이 만족하면 통과, 아니면 실패 if(lengthRegex.exec(passwd)&&upperCaseRegex.exec(passwd) &&lowerCaseRegex.exec(passwd)&&digitRegex.exec(passwd) &&specRegex.exec(passwd)) { // 유효성 검사 결과가 true 일 경우 alert('사용 가능한 패스워드'); return true; } else { // 유효성 검사 결과가 false 일 경우 alert('pw는 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합 필수!'); return false; } } // 아이디와 패스워드를 모두 체크하여 정상이면 true 리턴, 아니면 false 리턴 function check() { if(checkId() && checkPasswd()) { return true; } else { return false; } } */ // ================================================================================ // submit 전 최종 상태 체크를 위한 전역변수 설정 var checkIdResult = false; var checkPasswdResult = false; // 4 ~ 12 자리 영문, 숫자 조합의 ID 값을 전달받아 유효성 검사 function checkId(idForm) { var id = idForm.value; // id 가져오기 // ID 입력 항목에 대한 해당 태그 element 가져오기(checkIdResult) var element = document.getElementById('checkIdResult'); // ID 에 대한 정규표현식 설정 // => 첫글자 영문자, 두번째부터 영문자, 숫자 조합 3 ~ 11자리(총합 4 ~ 12자리) var regex = /^[A-Za-z][A-Za-z0-9]{3,11}$/g; // 자바스크립트에서 정규표현식 판별을 위해서는 // 정규표현식문자열.exec(검사데이터) (변수명.실행(검사데이터)) if(regex.exec(id)) { // 유효성 검사 결과가 true 일 경우 element.innerHTML = "사용 가능"; checkIdResult = true; } else { element.innerHTML = "사용 불가"; checkIdResult = false; } } // 4 ~ 12 자리 영문 대문자, 소문자, 숫자, 특수문자 조합의 Passwd 값을 전달받아 유효성 검사 function checkPasswd(passwdForm) { var passwd = passwdForm.value; // 패스워드 가져오기 // Passwd 입력 항목에 대한 해당 태그 element 가져오기(checkPasswdResult) var element = document.getElementById('checkPasswdResult'); // 패스워드 체크 // 1. 길이 체크 : 영문, 숫자, 특수문자(!@#$%) 조합 4~12 자리 // 2. 대문자 포함 체크 : // 3. 소문자 포함 체크 : // 4. 숫자 포함 체크 : // 5. 특수문자 포함 체크 : var lengthRegex = /[A-Za-z0-9!@#$%]{4,12}/; var upperCaseRegex = /[A-Z]/; var lowerCaseRegex = /[a-z]/; var digitRegex = /[0-9]/; var specRegex = /[!@#$%]/; // 1 ~ 5번까지의 모든 조건이 만족하면 통과, 아니면 실패 if(lengthRegex.exec(passwd)&&upperCaseRegex.exec(passwd) &&lowerCaseRegex.exec(passwd)&&digitRegex.exec(passwd) &&specRegex.exec(passwd)) { // 유효성 검사 결과가 true 일 경우 element.innerHTML = "사용 가능"; checkPasswdResult = true; } else { element.innerHTML = "사용 불가"; checkPasswdResult = false; } } // 아이디와 패스워드를 모두 체크하여 정상이면 true 리턴, 아니면 false 리턴 function check() { if(checkIdResult && checkPasswdResult) { returntrue; } else { alert('아이디 또는 패스워드 규칙 확인 필수!'); returnfalse; } } </script> <style type="text/css"> h1 { text-align: center; } table { border: 1px solid black; width : 400px; margin: auto; text-align: left; } </style> </head> <body> <h1>회원가입</h1> <form action="MemberJoinPro.me" method="post" name="joinForm" onsubmit="return check()"> <table> <tr> <td>아이디</td> <td> <input type="text" name="id" required="required" size="15" placeholder="4-12자리 영문,숫자 조합" onkeyup="checkId(this)"> <div id="checkIdResult"><!-- 자바스크립트에서 메세지 표시할 공간 --></div> </td> </tr> <tr> <td>패스워드</td> <td> <input type="password" name="passwd" required="required" size="15" placeholder="4-12자리 영문,숫자,특수문자 조합" onkeyup="checkPasswd(this)"> <div id="checkPasswdResult"><!-- 자바스크립트에서 메세지 표시할 공간 --></div> </td> </tr> <tr> <td>이름</td> <td><input type="text" name="name" required="required" size="15"></td> </tr> <tr> <td>나이</td> <td><input type="text" name="age" required="required" size="15"></td> </tr> <tr> <td>E-Mail</td> <td><input type="text" name="email" required="required" size="15"></td> </tr> <tr> <td>성별</td> <td> <input type="radio" name="gender" value="남" checked="checked" size="15">남 <input type="radio" name="gender" value="여" size="15">여 </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="회원가입"> <input type="button" value="돌아가기" onclick="history.back()"> </td> </tr> </table> </form> </body> </html>
