주말공부 (joinForm리팩토링 및 pw찾기 시 랜덤한번호(임시비번생성 ))

주말공부 or 복습

주말공부 (joinForm리팩토링 및 pw찾기 시 랜덤한번호(임시비번생성 ))

동곤일상 2025. 4. 27. 18:17

일단 5월7일부터 본격적인 프로젝트코딩이 시작될것같은데

그전에 좀 써먹어보려고 몇개의 기능을 구현해보려고한다

1) joinForm리팩토링 (유효성검사추가)

기존joinForm (비밀번호,이메일,전화번호 유효성검사X)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

</head>
<body>
<!--  onsubmit :  나의 form 내부에 submit버튼 클릭되면 
			form 태그에 이벤트 발생(target == form)
return input_check(this) : input_check()함수 호출 , 매개변수this : form객체를 의미					
				-->
<form action="join" name="f" method="post" onsubmit="return input_check(this)">
	<input type="hidden" name="picture" value=""><!-- 업로드된 이미지의 이름이 들어갈태그 -->
	<table class="table">
		<tr>
		<td rowspan="4" valign="bottom">
		<img src="" width="100" height="120"  id="pic"><br>

		<font size="1"><a href="javascript:win_upload()">사진등록</a></font>
		</td><th>아이디</th>
		<td><input type="text" name="id"  class="form-control">
		<button type="button" onclick="idchk()" class="btn btn-dark" id="chk" name="chk">중복검색</button>
		</td></tr>
		<tr><th>비밀번호</th><td><input type="password" name="pass"></td></tr>
		<tr><th>이름</th><td><input type="text" name="name"></td></tr>
		<tr><th>성별</th>
		<td>
		<label for="gender1" class="form-check-label">
		남<input type="radio" name="gender" id="gender1" value="1">
		</label>
		
		<label for="gender2" class="form-check-label">
		여<input type="radio" name="gender" id="gender2" value="2" >
		</label>
		
		</td></tr>
		<tr><th>전화번호</th><td colspan="2"><input type="text" name="tel" class="form-control"></td></tr>
		<tr><th>이메일</th><td colspan="2"><input type="text" name="email" class="form-control"></td></tr>
		<!-- button태그의 기본type : submit임 -->
		<tr><td colspan="3"><button class="btn btn-outline-dark">회원가입</button ></td></tr>
	</table>
</form>
<script>

    
function input_check(f){
	//f : <form...>
	//f.id : <input name="id">name이 id인태그
	if(f.id.value.trim() == ""){ 
		alert("아이디입력")
		f.id.focus(); //name이id인 곳에 포커스를 둠
		return false; //기본이벤트 취소
	}
	if(f.pass.value.trim() == ""){ 
		alert("비밀번호입력")
		f.pass.focus();
		return false; 
	}
	if(f.name.value.trim() == ""){ 
		alert("이름입력")
		f.name.focus();
		return false; 
	}
	return true;//아이디비번이름이 입력됐다면 true
}

function win_upload(){
	let op = "width=500,height=500 ,top=50 ,left=150";
	open("pictureForm","",op);
	//pictureForm.jsp를 연다
}

function idchk(){
if(document.f.id.value==''){
	alert("아이디를 입력하세요");
	document.f.id.focus();
	}
else{
	let op="width=500,height=200,left=50,right=150";
	open("idchk?id="+document.f.id.value,"",op);
}
	
}

</script>
</body>
</html>

바꾼 joinForm

(주요하게봐야할 곳

password , email , tel의 하위에 태그하나 추가)

(tChk(this) , pChk(this ) , eChk( this )함수와 valid(text,type)함수 , input_check함수)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

</head>
<body>
<!--  onsubmit :  나의 form 내부에 submit버튼 클릭되면 
			form 태그에 이벤트 발생(target == form)
return input_check(this) : input_check()함수 호출 , 매개변수this : form객체를 의미					
				-->
<form action="join" name="f" method="post" onsubmit="return input_check(this)">
	<input type="hidden" name="picture" value=""><!-- 업로드된 이미지의 이름이 들어갈태그 -->
	<table class="table">
		<tr>
		<td rowspan="4" valign="bottom">
		<img src="" width="100" height="120"  id="pic"><br>

		<font size="1"><a href="javascript:win_upload()">사진등록</a></font>
		</td><th>아이디</th>
		<td><input type="text" name="id"  class="form-control">
		<button type="button" onclick="idchk()" class="btn btn-dark" id="chk" name="chk">중복검색</button>
		</td></tr>
		<tr><th>비밀번호</th><td><input type="password" name="pass" onkeyup="pChk(this)"></td></tr>
		<tr><td id="passValid"></td></tr>
		<tr><th>이름</th><td><input type="text" name="name"></td></tr>
		<tr><th>성별</th>
		<td>
		<label for="gender1" class="form-check-label">
		남<input type="radio" name="gender" id="gender1" value="1">
		</label>
		
		<label for="gender2" class="form-check-label">
		여<input type="radio" name="gender" id="gender2" value="2" >
		</label>
		
		</td></tr>
		<tr><th>전화번호</th><td colspan="2"><input type="text" name="tel" class="form-control" onkeyup="tChk(this)"></td></tr>
		<tr><td id="telValid"></td></tr>
		<tr><th>이메일</th><td colspan="2"><input type="text" name="email" class="form-control" onkeyup="eChk(this)"></td></tr>
		<tr><td id="emailValid"></td></tr>
		<!-- button태그의 기본type : submit임 -->
		<tr><td colspan="3"><button class="btn btn-outline-dark">회원가입</button ></td></tr>
	</table>
</form>
<script>
function pChk(p){
	const passVal = document.querySelector("#passValid");
	if(!valid(p.value,'pass')){
		passVal.innerHTML= '특수문자포함 8~16자리';
		passVal.style.color='red';
	}
	else{
		passVal.innerHTML= '유효한비밀번호';
		passVal.style.color='green';
	}
}
function tChk(t){
	const telVal = document.querySelector("#telValid");
	if(!valid(t.value,'tel')){
		telVal.innerHTML= '올바른 휴대폰번호입력바람';
		telVal.style.color='red';
	}
	else{
		telVal.innerHTML= '유효한 번호';
		telVal.style.color='green';
	}
}
function eChk(e){
	const emailVal = document.querySelector("#emailValid");
	if(!valid(e.value,'email')){
		emailVal.innerHTML= '올바른 Email형식작성하세요';
		emailVal.style.color='red';
	}
	else{
		emailVal.innerHTML= '유효한E-mail';
		emailVal.style.color='green';
	}
}

function valid(text,type){
	if(type==='email'){//넘어온값과 name=email의 값이 동일할때
		const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9._]+\.[a-zA-Z]{2,}$/;
		return regex.test(text);
	}
	else if(type==='tel'){ //넘어온값과 name=tel의 값이 동일할때
		const regex = /^(01[0126789])-?\d{3,4}-?\d{4}$/;
		return regex.test(text);
	}
	else if(type==='pass'){ //비밀번호유효성검사
		const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_])[A-Za-z\d\W_]{8,16}$/;
		//(?=.*[A-Za-z]) → 문자열 어딘가에 영문자가 있어야 해 (확인만)
		//\W : 특수문자 , [A-Za-z\d\W_]{8,16} : 해당문자들이 8개~16개존재해야함
		return regex.test(text);
	}
}

	
    
function input_check(f){
	//f : <form...>
	//f.id : <input name="id">name이 id인태그
	if(f.id.value.trim() == ""){ 
		alert("아이디입력")
		f.id.focus(); //name이id인 곳에 포커스를 둠
		return false; //기본이벤트 취소
	}
	if(f.pass.value.trim() == ""){ 
		alert("비밀번호입력")
		f.pass.focus();
		return false; 
	}
	if(f.name.value.trim() == ""){ 
		alert("이름입력")
		f.name.focus();
		return false; 
	}
	if(f.gender.value.trim() == ""){ 
		alert("성별체크")
		return false; 
	}
	if(f.tel.value.trim() == ""){ 
		alert("전화번호입력바람")
		f.tel.focus();
		return false; 
	}
	if(f.email.value.trim() == ""){ 
		alert("email입력바람")
		f.email.focus();
		return false; 
	}
	if(!(valid(f.pass.value.trim()) 
		&& valid(f.email.value.trim())
		&& valid(f.tel.value.trim()))){ //3개중 한개라도 유효성검사를 실패했다면 실행
	alert("형식을준수해주세요")
	return false;
	}
	return true;//아이디비번이름이 입력됐다면 true
}

function win_upload(){
	let op = "width=500,height=500 ,top=50 ,left=150";
	open("pictureForm","",op);
	//pictureForm.jsp를 연다
}

function idchk(){
if(document.f.id.value==''){
	alert("아이디를 입력하세요");
	document.f.id.focus();
	}
else{
	let op="width=500,height=200,left=50,right=150";
	open("idchk?id="+document.f.id.value,"",op);
}
	
}

</script>
</body>
</html>

email, tel , pass의 값 입력시(keyup)이벤트 발생 시 echk(this),tchk(this) ,pchk(this)함수이동

해당함수에선 전달받은값(this)의 value와 type을 적어 valid(text,type)로 전달

valid(text,type)함수에서 전달받은type을 비교해

일치하는값에 해당하는 유효성검사를 실시후 참거짓 리턴

ex) /^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_])[A-Za-z\d\W_]{8,16}$/

어디든 영문자1개 , 숫자1개 , 특수문자1개를포함 한 8~16자리문자

?= : 검사

.* : 0개이상(앞에뭐가있든없든 신경X)

(?=.*[A-Za-z]) : 어디든 영문자1개가 존재하는가?

각 검사결과에따른 메시지를 하단에 넣어준다.(xxChk(this))

form에 전달 시 valid함수에 email,tel,password함수가 들어갓을 때

모두 true가 나와야 action=join으로 폼을 넘길것임

(input_check(this))

2) 임시비밀번호만들어보기 (이메일로 전송하거나 DB에 없데이트하는법은 나중에)

MemberController의 pw매핑부분!! (출력만해놨기때문에 DB에 영향은없음)

@RequestMapping("pw") // 비번찾기
	public String pw(HttpServletRequest request, HttpServletResponse response) {
		String id = request.getParameter("id");
		//name="name"인 파라미터를 가져와
		String email = request.getParameter("email");
		String tel = request.getParameter("tel");
		String pass = dto.pwSearch(id, tel, email);
		String rPass = UUID.randomUUID().toString().substring(0,8);
		//MemberDto에 가서 DB정보와비교해 가져온다
		if(pass==null) {
			request.setAttribute("msg", "password를 찾을수없어요");
			request.setAttribute("pass", pass);
			return "pwSearch";
		}
		else {
			//request.setAttribute("msg", id+"님의 password : "+pass.substring(0,pass.length()-2)+"**");
			request.setAttribute("msg", "임시비번 : "+rPass);
			request.setAttribute("pass", pass);
			return "pwSearch";
		}
	}

1 UUID.randomUUID()를 이용해 어디든없는 UUID생성

2 toString으로 문자열로변경

3 substring을 이용해 8자리만가져오기

4) alert창에 띄우기

지금은 DB를 망치고싶지않아서 업데이트부분은 넣지않았다

updatePass(id,pass)를 구현해놨기때문에

아이디와 임시비번만 넘겨준다면 될거임.

그 후 메일로 해당 임시비밀번호를전송하는 식으로 하려고함

'주말공부 or 복습' 카테고리의 다른 글

주말복습8(javaScript) (1)	2025.03.30
주말복습 7( HTML) (0)	2025.03.16
주말복습6 (DB) (2)	2025.03.09
주말복습5 (0)	2025.03.03
주말복습4(Collection(List,set,Map) (0)	2025.03.01

현재글주말공부 (joinForm리팩토링 및 pw찾기 시 랜덤한번호(임시비번생성 ))

web동곤

백엔드위주

인텔리제이, 유익, 코딩, `, 이클립스, 꿀팁, Easy, 스코프, 기초, Eclipse, 초보, java, 자바, 반복문, Method, Spring, 기본, 유익한, 메서드, 형변환,

Today :
Yesterday :

web동곤