저번 아이디 중복확인 구현에 이어서 진행된다.
5- 게시판 (아이디 중복확인) 수정 중
1. 회원가입 버튼을 submit하면 signUpCmd에서 회원가입 하려는 Id 값과 DB에 존재하는 id값을 비교한다 이미 있는 값이면 1을 signUpCmd으로 리턴하고, 없는 값이면 0을 리턴한다 :: 리턴값이 1이면 co
dwc04112.tistory.com
회원가입을 누르면 id의 중복검사를 실행하는데 중복확인 버튼을 구현하여
중간 과정에서 중복검사를 실행할수 있게 한다.
::동작방식
중복확인을 누르면 script에서 idCheck.bbs로 입력한 id를 보낸다 >
idCheckCmd에서 입력한 id 값이 db에 존재하면 1 없으면0을 반환. 반환값을 다시 jsp로 보낸다
> 그 반환값에 따라 중복확인을 통과했는지 안했는지 알 수 있다.
::문제점 (1)
idCheck.bbs로 이동하는 url 실행 후 memIdCheck값을 아직 받지 못한 상태에서
if문을 실행하여 첫번째에는 무조건 "이미 존재하는 아이디 입니다" 를 출력한다
따라서 한번씩 다 밀리는 것. (중복확인을 누르면 이전에 입력한 값에 대한 결과를 출력한다)
function idcheck(){
//0912====
//중복확인 누르면 (아이디가 입력되었을때) idCheckCmd로 이동해서 입력한 아이디값이 중복되는지 확인한다
//있으면 1 없으면 0
var id = document.getElementById("id").value;
if(id.length<1 || id==null){
alert("중복체크할 아이디를 입력하십시오");
return false;
}
location.href="idCheck.bbs?id="+ id;
if(${memIdCheck==0}){
alert("사용 가능한 아이디 입니다.");
return true;
}else{
alert("이미 존재하는 아이디 입니다.");
}
}
::해결방안 (1)
"사용가능한 아이디 입니다" 문구를 jstl의 if문으로 memIdCheck (비교한 아이디값 0 or 1)을 받아서 비교한다
0이면 "사용 가능한 아이디 입니다" 1이면 "이미 존재하는 아이디 입니다"
이런 방법으로 중복확인을 누르면 밀리지 않고 바로 아이디 중복 비교값을 출력한다.
<tr>
<td><label for="id">아이디</label></td>
<td><input type="text" name="id" id="id" value="${idValue}"/></td>
<!--0912 중복된 아이디가 있으면 어떻게 처리할까? 0912==-->
<td><input type="button" value="중복확인" onclick="return idcheck()"/></td>
<td style="color: rosybrown;"><c:if test="${memIdCheck==1}">
<c:out value="이미 존재하는 아이디 입니다."/>
</c:if>
<c:if test="${memIdCheck==0}">
<c:out value="사용 가능한 아이디 입니다."/>
</c:if></td>
</tr>위는 jstl의 if문으로 존재 여부를 알려주는 코드이다. 아래는 실행 결과
::문제점 (2)
중복확인을 누르고 다른 아이디 값을 입력하여 회원가입 하면 회원가입이 실행된다.
즉 중복확인의 의미가 사라진다.
jstl 과 script에 작동순서가 있어서 id값과 ${memIdCheck} 값을 비교하기가 힘들다..
::해결방안 (2)
id 입력부분에 hidden 타입인 ConfId를 생성했다. (중복확인 후 id입력했는지 안했는지 확인)
중복확인을 누르면 ConfId 값이 Pass로 변하고 만약 중복확인 후에 아이디 입력이 감지되면 NonPass로 변경한다
<tr>
<td><label for="id">아이디</label></td>
<!--0917여기서 CofId란 중복확인을 끝나고 id에 키 입력이 있으면 다시 NonPass 즉 중복확인 실패 상태로 되돌림-->
<td><input type="text" name="id" id="id" value="${idValue}" onkeydown="ConfId()"/></td>
<!--0912 중복된 아이디가 있으면 어떻게 처리할까? 0912==-->
<td><input type="button" value="중복확인" onclick="return idcheck()"/></td>
<td style="color: rosybrown;">
<!--아래 value가 pass면 중복확인 통과/ NonPass면 중복확인 실패-->
<td><input type="hidden" id="finalConf" value="idPass"></td>
</tr>
id 입력창에 키보드 입력 시 ConfId() 함수를 실행하여
function ConfId() {
document.getElementById("finalConf").value = "idNonPass";
}
맨 아래의 hidden타입 finalConf의 값을 idNonPass로 바꾼다.
이 방법으로 키 입력이 됐을때 Pass일때 회원가입 성공, NonPass일때 회원가입 실패를 구분한다 (아래코드 참고)
if(Conf === "idPass") {
alert("회원가입 완료!") //로그인 성공
}else if(Conf ==="idNonPass"){
alert("중복확인 후 아이디를 변경하지 말아주세요. 다시 중복확인");
return false; //중복확인 후 id입력감지 = NonPass
}
::전체코드
<html>
<head>
<title>회원가입 화면</title>
</head>
<body>
<form action="signUp.bbs" method="post" onsubmit="return tocheckpw2()" data-ajax ="false" >
<table>
<tr>
<td><label for="id">아이디</label></td>
<!--0917여기서 CofId란 중복확인을 끝나고 id에 키 입력이 있으면 다시 NonPass 즉 중복확인 실패 상태로 되돌림-->
<td><input type="text" name="id" id="id" value="${idValue}" onkeydown="ConfId()"/></td>
<!--0912 중복된 아이디가 있으면 어떻게 처리할까? 0912==-->
<td><input type="button" value="중복확인" onclick="return idcheck()"/></td>
<td style="color: rosybrown;">
<!--아래 value가 pass면 중복확인 통과/ NonPass면 중복확인 실패-->
<td><input type="hidden" id="finalConf" value="idPass"></td>
</tr>
<tr>
<td><label for="password">비번</label></td>
<td><input type="text" name="password" id="password" onkeyup="tocheckpw1()"/></td>
</tr>
<tr>
<td><label for="passwordCheck">비번확인</label></td>
<td><input type="text" name="passwordCheck" id="passwordCheck" placeholder="비밀번호 확인" onkeyup="tocheckpw1()"></td>
<td colspan="2" id ="pwsame" style="color:rosybrown;"></td>
</tr>
<tr>
<!-- javascript로 비번확인 체크 로직까지 넣어서 회원가입 요청 처리 -->
<!-- 같으면 signUp.bbs 요청 날림 -->
<!-- 다르면 alert('비번을 정확히 입력 바랍니다') -->
<input type="submit" value="회원가입"/>
</tr>
</table>
</form>
나와야 하는 숫자 1 or 0 ::: ${memIdCheck}
<c:if test="${memIdCheck==1}">
<script> alert("이미 존재하는 아이디 입니다.") </script>
</c:if>
<c:if test="${memIdCheck==0}">
<script> alert("사용 가능한 아이디 입니다.") </script>
</c:if>
</body>
</html>
<head> 바로 밑부분에 넣은 script코드
<script type="text/javascript">
function tocheckpw1(){
var pw = document.getElementById("password").value;
var pwCheck = document.getElementById("passwordCheck").value;
if(pwCheck === ""){ // ==과 ===차이 기준 : 타입의 값과 타입까지 비교하냐?
document.getElementById('pwsame').innerHTML = "비밀번호 확인을 입력해주세요."
}else {
if (pw !== pwCheck) {
//alert('비밀번호가 틀렸습니다. 다시 입력해주세요');
document.getElementById('pwsame').innerHTML = "비밀번호가 일치하지 않습니다."
return false;
} else {
document.getElementById('pwsame').innerHTML = "비밀번호가 일치합니다."
}
}
}
function idcheck(){
//0912====
//중복확인 누르면 (아이디가 입력되었을때) idCheckCmd로 이동해서 입력한 아이디값이 중복되는지 확인한다
//있으면 1 없으면 0
var id = document.getElementById("id").value;
if(id.length<1 || id==null){
alert("중복체크할 아이디를 입력하십시오");
return false;
}
/*
var url = "idCheck.bbs?id="+ id;
window.open(url, "get", "height = 180, width = 300");
return true;
*/
location.replace("idCheck.bbs?id="+ id);
}
function ConfId() {
document.getElementById("finalConf").value = "idNonPass";
}
function tocheckpw2(){
var pw = document.getElementById("password").value;
var pwCheck = document.getElementById("passwordCheck").value;
var Conf = document.getElementById("finalConf").value;
if(${memIdCheck==0}){
if(pw.length<1 || pw===null){
alert("비밀번호를 입력해주세요"); // 비밀번호를 입력 안하고 로그인
return false;
}else {
if (pw !== pwCheck) {
alert('비밀번호가 틀렸습니다. 다시 입력해주세요');
return false; // 비밀번호 불일치 로그인
}else{
if(Conf === "idPass") {
alert("회원가입 완료!") //로그인 성공
}else if(Conf ==="idNonPass"){
alert("중복확인 후 아이디를 변경하지 말아주세요. 다시 중복확인");
return false; //중복확인 후 id입력감지 = NonPass
}
}
}
}else{
alert("중복확인을 실행해주세요");
return false;
}
}
</script>
::변경점
1. script 에서 location.href를 사용하여 이동했는데, 이 때 뒤로가기를 누르면 이전 id 입력값 sign페이지
(http://localhost:8080/jspmvc/signUp.jsp?id=어쩌구) 로 이동해서 불편함이 있었다
script 에서 location.replace("idCheck.bbs?id="+ id); 를 사용하여 history stack에서 현재 페이지를 호출할 페이지로
바꿔치기 한다. 따라서 뒤로가기를 누르면 signUp으로 이동하는것이 아닌 index(로그인 화면) 으로 돌아간다
2. 원래는 해결방안(1) 에서 보다시피 jstl if문으로 중복확인 버튼옆에 중복확인 여부를 표시했다.
비밀번호와 같이 문구가 출력되니까 지저분해보여서 script 의 alert를 사용해 중복확인 여부
메시지 출력방식을 바꿨다.
3. 중복확인시 사용가능한 id면 입력한 id를 그대로 남겨두고, 이미 존재하는 아이디면 지정한 문구 출력
'ETC > JSP' 카테고리의 다른 글
| 9- 게시판 (검색기능2) (0) | 2021.09.20 |
|---|---|
| 8- JSP 게시판 (검색기능) (0) | 2021.09.18 |
| 6- JSP 게시판 (수정한 오류) (0) | 2021.09.15 |
| 5- JSP 게시판 (아이디 중복확인 1) (0) | 2021.09.13 |
| 4- JSP 게시판 (회원가입 기능) (0) | 2021.09.11 |
