📌 주요 업무
✅ JDBC를 활용한 회원가입 기능 구현 - 아이디 중복 체크
✅ JDBC를 활용한 회원가입 기능 구현 - 아이디/비밀번호 양식 체크
✅ JDBC를 활용한 회원가입 기능 구현 - UI 개선
아이디 중복 확인
JS
- Controller로부터 반환된 cnt 값이 0이고 아이디가 입력된 경우 -> 사용 가능한 아이디
- cnt 값이 1이고 아이디가 입력된 경우 -> 중복된 아이디
/** id 중복체크 **/
checkDuplicatedId: function () {
var userId = this.userId;
var encodedUrl = encodeURI("member/jdbc/idCheck");
$.ajax({
type: "GET",
url: encodedUrl,
data: {
userId: this.userId,
},
success: function (cnt) { // controller에서 넘어온 cnt
if (userId.length == 0) {
alert("아이디를 먼저 입력하세요.");
}
if (userId.length != 0 && cnt == 0) { // 0이면 사용 가능한 아이디
alert("사용 가능한 아이디입니다.");
}
if (cnt == 1) { // 1이면 이미 존재하는 아이디
alert("중복된 아이디입니다.");
}
},
error: function () {},
});
},Controller
- Service 단의 idCheck 함수 호출
@ResponseBody
@RequestMapping(value = "/jdbc/idCheck", method = RequestMethod.GET)
public int idCheck(@RequestParam("userId") String userId) throws SQLException {
int cnt = this.jdbcMemberService.idCheck(userId);
return cnt;
}Service
- DAO와 커넥션 후 DAO 단의 idCheck 함수 호출 후 cnt 반환
public int idCheck(String userId) {
MemberTableDAO memberTableDAO = null;
int cnt = 0;
try {
memberTableDAO = new MemberTableDAO(jdbc.getDataSource().getConnection());
cnt = memberTableDAO.idCheck(userId);
// DB Close
memberTableDAO.closeConnection();
} catch(SQLException e) {
log.error("SQLException", e);
}
return cnt;
}DAO
- Select 문을 통해 입력된 아이디를 카운트
public int idCheck(String userId) throws SQLException {
StringBuffer query = new StringBuffer();
int count = 0;
query.append(" SELECT COUNT(user_id) as cnt \n");
query.append(" FROM member \n");
query.append(" WHERE user_id = ? \n");
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = connection.prepareStatement(query.toString());
ps.setString(1, userId);
rs = ps.executeQuery();
while (rs.next()) {
count = rs.getInt("cnt");
}
rs.close();
ps.close();
} catch (SQLException e) {
if (rs != null) {
rs.close();
}
if (ps != null) {
ps.close();
}
} catch (Exception e) {
if (rs != null) {
rs.close();
}
if (ps != null) {
ps.close();
}
}
return count;
}아이디/비밀번호 양식 확인
JSP
- @click, v-show 사용
👉 v-show, v-if를 활용한 조건부 렌더링
<h5><strong>* 아이디 </strong></h5>
<input v-model="userId" type="text" id="userId" name="userId" class="form-control" placeholder="아이디를 입력하세요." style="font-size: 15px; border-radius: 0px !important; float: left; width:85%;">
<input type="button" id="idChk" class="btn btn-outline-primary" value="중복 확인" style="float: right;" @click = checkDuplicatedId();>
<span class="error_msg" v-show="!isIDSpecialCheck" style="color: #fa6607; font-size: 13px;">아이디는 4글자 이상, 8글자 이하의 영문 소문자와 숫자만으로 입력해주세요.</span> JS
- watch 문법 사용
watch: {
userId: function (newVal, oldVal) {
this.checkRegisterId();
},
password: function (newVal, oldVal) {
this.checkRegisterPW();
},
re_password: function (newVal, oldVal) {
this.checkPWSame();
},
},💡 watch 문법이란 ?
- 데이터 값의 변경이 일어나는 것을 감시, 인지하는 역할
- 값의 변경이 일어났을 때 특정 행위를 할 수 있도록 함.
위의 코드에서 newVal은 바인딩 된 현재의 값, oldVal은 이전의 값으로,
아이디, 비밀번호, 재입력되는 비밀번호 모두 입력되는 순간 해당 함수를 타게 하기 위해 watch 문법 사용
- 아이디 양식 : 4 ~ 8자의 영소문자 or 숫자 or 조합
/** 아이디 양식 체크 **/
checkRegisterId: function () {
var userId = this.userId;
var IdRegType = /^[a-z0-9]{4,8}$/;
this.isIDSpecialCheck = true;
if (!IdRegType.test(userId) && userId.length != 0) {
this.isIDSpecialCheck = false;
return false;
}
},- 비밀번호 양식 : 8자 이상의 영소문자 or 숫자 or 조합
/** 비밀번호 양식 체크 **/
checkRegisterPW: function () {
var password = this.password;
var pwRegType = /^[a-z0-9]{8,}$/;
this.isPWSpecialCheck = true;
this.isPWSameCheck = true;
if (!pwRegType.test(password) && password.length != 0) {
this.isPWSpecialCheck = false;
return false;
}
},비밀번호 일치 확인
/** 비밀번호 일치 체크 **/
checkPWSame: function () {
var password = this.password;
var re_password = this.re_password;
this.isPWSameCheck = true;
if (password != re_password) {
this.isPWSameCheck = false;
return false;
}
},결과 확인
