마이페이지에서 볼 수 있는 프로필사진,
사용자가 실수로 유효하지 않은 데이터 값을 입력하지 않도록 오류를 알려주는 유효성검사,
회원정보가 맞는지 확인하기 위한 이메일 인증기능까지.. 회원가입을 구현하면서 다음과 같은 추가 기능을 넣었다.
1. 프로필사진 올리기
2. 아이디 중복확인
3. 이메일 주소 인증
4. 비밀번호 : 영어 대/소문자 + 숫자를 혼용하여 8~16글자
5. 비밀번호 확인 : 위 비밀번호와 일치해야함
6. 이름 : 2~6글자
7. 휴대폰번호 : 010-0000-0000 전화번호 형식대로 입력
8. 약관 전체동의를 누르면 모두 선택되고, 필수항목은 꼭 선택해야지만 회원가입이 가능
joinFrm.jsp
<%@ 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="/resources/css/member/joinFrm.css">
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<div class="join_wrap">
<div class="join_container">
<div class="logo">
<div class="Mate_logo">
<a href="/">Oh-Mate!</a>
</div>
<div class="join_cont">
<h1>JOIN US</h1>
<p>
회원 종류에 따라 회원가입 절차가 다릅니다.
<br>
고객님께서 해당하는 유형을 선택하여 회원가입을 진행해 주시기 바랍니다.
</p>
<div class="btn_wrap">
<a href="/joinMate.do">일반 회원가입</a>
</div>
<div class="btn_wrap">
<a href="/joinOwner.do">기업 회원가입</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
joinFrm.css
@charset "UTF-8";
.join_wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f8f8fa;
overflow-y: scroll;
}
.join_wrap .join_container{
width: 600px;
margin: 150px auto 210px;
}
.join_wrap .join_cont{
background: #fff;
padding: 50px 45px 60px;
}
.btn_wrap{
padding: 30px 0 0;
}
.btn_wrap a{
display: block;
line-height: 60px;
border-radius: 5px;
background: #D35460;
text-align: center;
font-size: 15px;
color: #fff;
font-weight:bold;
letter-spacing:-0.5px;
text-decoration: none;
}
.join_wrap .join_cont>p{
font-size: 15px;
color: #828282;
letter-spacing: -0.5px;
line-height: 1.5;
}
.Mate_logo a{
font-size:40px;
font-family: "logo";
color: #956bfc;
text-decoration: none;
line-height: 60px;
}
.Mate_logo{
text-align: center;
padding-bottom: 10px;
}
joinMate.jsp
<%@ 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="/resources/css/member/join.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<div class="join_wrap">
<div class="join_container">
<div class="logo">
<div class="Mate_logo">
<a href="/">Oh-Mate!</a>
</div>
<div class="join_cont">
<h1>회원가입</h1>
<p>
메이트 일반회원 가입 페이지 입니다. <br> 기본정보를 입력해주세요
</p>
<form action="/join.do" method="post" enctype="multipart/form-data">
<h6>프로필 사진</h6>
<input type="file" name="filepath" id="filepath"
accept=".gif, .jpg, .jpeg, .png"><br>
<br>
<h6 class="gender">성별 선택</h6>
 
<div class="select">
<input type="radio" id="select" name="select" value="m"><label
for="select" style="width: 130px;">남자</label> <input
type="radio" id="select2" name="select" value="w"><label
for="select2" style="width: 130px;">여자</label>
</div>
<br>
<h6 class="age">나이대 선택</h6>
 
<div class="select">
<input type="radio" id="select3" name="selectAge" value="two"><label
for="select3" style="width: 130px;">20대</label> <input
type="radio" id="select4" name="selectAge" value="three"><label
for="select4" style="width: 130px;">30대</label> <input
type="radio" id="select5" name="selectAge" value="four"><label
for="select5" style="width: 130px;">40대이상</label>
</div>
<br>
<h6>아이디</h6>
<div class="in-line">
<input type="text" name="memberId" id="memberId"
class="form-control" placeholder="아이디 입력(5~11글자)" maxlength="11">
<button type="button" id="memberIdChk"
class="btn btn-primary inputBtn1">중복 확인</button>
</div>
<br>
<h6>이메일주소</h6>
<div class="in-line">
<input type="text" name="email" id="email" class="form-control"
placeholder="이메일주소 입력" maxlength="33">
<button type="button" id="emailbutton"
class="btn btn-primary inputBtn2">인증번호 받기</button>
</div>
<br>
<h6>비밀번호</h6>
<input type="password" name="memberPw" id="memberPw"
class="form-control" placeholder="비밀번호 입력(숫자, 대소문자 조합 4~12글자)"
maxlength="12"> <span class="expResult"> </span><br>
<h6>비밀번호 확인</h6>
<input type="password" name="memberPwre" id="memberPwre"
class="form-control" placeholder="비밀번호 확인" maxlength="12">
<span class="expResult"> </span><br>
<h6>이름</h6>
<input type="text" name="memberName" id="memberName"
class="form-control" placeholder="이름(2~6글자)" maxlength="6"><br>
<h6>휴대폰번호</h6>
<input type="text" name="phone" id="phone" class="form-control"
placeholder="전화번호 형식 000-0000-0000" maxlength="13"> <span
class="expResult"> </span><br> <input type="checkbox"
id="chkAllBox">약관 전체 동의<br> <input type="checkbox"
class="priBox">개인정보 수집 이용 동의(필수)   <a
data-toggle="modal" href="#modalL1">약관 보기</a> <br> <input
type="checkbox" class="priBox">오늘부터 메이트 이용약관(필수)  <a
data-toggle="modal" href="#modalL2">약관 보기</a> <br> <input
type="checkbox" class="priBox">마케팅 활용 및 광고성 정보 수신 동의(선택)
<br>
<br>
<br>
<div>
<input type="submit" class="btn btn-primary joinbtn"
id="joinsubmit" value="회원가입">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
join.js
$(function(){
var idChk = false;
var emailChk = false;
var emailCodeChk = false;
var pwChk = false;
var pwreChk = false;
var nameChk = false;
var phoneChk = false;
var code = ""; //이메일 전송 인증번호 저장을 위한 코드
//입력값 변수
function checkJoin(){
var id = $("#memberId").val();
var email = $("#email").val();
var emailCode = $("#authMsg").html();
var pw = $("#memberPw").val();
var pwre = $("#memberPwre").val();
var name = $("#memberName").val();
var phone = $("#phone").val();
var priBox = $("#agree").val();
if($(':radio[name="gender"]:checked').length < 1){
alert('성별을 선택해주세요.');
return false;
}else if($(':radio[name="age"]:checked').length < 1){
alert('연령대를 선택해주세요.');
return false;
}else if(id == "" || idChk == false){
alert("아이디를 올바르게 입력해주세요.");
return false;
}else if(email == "" || emailChk== false){
alert("이메일을 올바르게 입력해주세요.");
return false;
}else if(emailCode != "인증번호가 일치합니다." || emailCodeChk == false){
alert("인증번호를 입력해주세요.")
return false;
}else if(pw == "" || pwChk== false){
alert("비밀번호를 올바르게 입력해주세요.");
return false;
}else if(pwre == "" || pwreChk== false){
alert("비밀번호를 다시 한 번 입력해주세요.");
return false;
}else if(name == "" || nameChk== false){
alert("이름을 올바르게 입력해주세요.");
return false;
}else if(phone == "" || phoneChk== false){
alert("전화번호를 올바르게 입력해주세요.");
return false;
}else if(priBox == "9"){
alert("필수 항목에 체크해주세요.");
return false;
}else{
return true;
}
}
$("#joinsubmit").on("click", function(){
return checkJoin();
});
//아이디 유효성검사
$("#memberId").keyup(function(){
var memberId = $(this).val();
var value = /^[a-zA-Z0-9]{5,11}$/;
if(value.test(memberId)){
$(".result1").html("중복체크를 해주세요.");
$(".result1").css("color","red");
idChk = false;
return false;
}else{
$(".result1").html("아이디는 대소문자 5~11글자로 입력해주세요");
$(".result1").css("color","red");
idChk = false;
return false;
}
});
//아이디 중복체크
$("[name=memberIdChk]").click(function(){
var memberId = $("#memberId").val();
var value = /^[a-zA-Z0-9]{5,11}$/;
if(memberId == "" || !(value.test(memberId))){
$(".result1").html("아이디를 올바르게 입력해주세요.");
$(".result1").css("color","red");
return;
}
$.ajax({
url:"/IdCheck.do",
data:{memberId:memberId},
type:"post",
success:function(data){
if(data == 1){
$(".result1").html("사용 가능한 아이디 입니다.");
$(".result1").css("color","blue");
idChk=true;
}else{
$(".result1").html("이미 사용중인 아이디 입니다.");
$(".result1").css("color","red");
idChk=false;
}
}
});
});
//이메일
$("[name=email]").keyup(function(){
var email = $(this).val();
var value = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
if(email == "" || !(value.test(email))){
$(".result2").html("이메일을 올바르게 입력해주세요.");
$(".result2").css("color","red");
return false;
}else{
$.ajax({
url:"/emailCheck.do",
data:{email:email},
type:"post",
success:function(data){
if(data == 2){
$(".result2").html("사용 가능한 이메일 입니다.");
$(".result2").css("color","blue");
emailChk=true;
$("#emailbutton").attr("disabled", false);
}else{
$(".result2").html("이미 사용중인 이메일 입니다.");
$(".result2").css("color","red");
emailChk=false;
$("#emailbutton").attr("disabled", true);
}
}
});
}
});
//인증번호 이메일 전송
$("[name=emailChks]").click(function(){
var email = $("[name=email]").val();
var cehckBox = $("#authCode");
var boxWrap = $(".auth");
$.ajax({
type:"GET",
url:"/mailCheck.do?email=" + email,
success:function(data){
console.log("data : " + data);
cehckBox.attr("disabled",false);
code = data; // Controller부터 전달받은 인증번호를 code에 저장
}
});
});
//전송완료 눌렀을때 alert창
$("#emailbutton").click(function(){
var email = $("[name=email]").val();
var value = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
if(value.test(email)){
alert('입력하신 메일 주소로 인증번호가 전송되었습니다.');
}else{
alert('이메일을 올바르게 입력해주세요.');
}
});
//인증번호 비교
$("#authCode").blur(function(){
var inputCode = $(this).val(); // 입력코드
if(inputCode == code){ // 일치할 경우
$("#authMsg").html("인증번호가 일치합니다.");
$("#authMsg").css("color","blue");
emailCodeChk = true;
} else { // 일치하지 않을 경우
$("#authMsg").html("인증번호를 다시 확인해주세요.");
$("#authMsg").css("color", "red");
emailCodeChk = false;
}
});
//비밀번호
$("#memberPw").keyup(function(){
var password = $(this).val();
var value = /^[a-zA-Z0-9]{4,12}$/;
if(value.test(password)){
$(".result3").html("사용 가능한 비밀번호 입니다.");
$(".result3").css("color","blue");
pwChk=true;
return true;
}else{
$(".result3").html("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해주세요.");
$(".result3").css("color","red");
return false;
}
});
//비밀번호 확인
$("#memberPwre").keyup(function(){
var password = $("#memberPw").val();
var passwordChk = $("#memberPwre").val();
if(password == passwordChk){
$(".result4").html("비밀번호가 일치합니다.");
$(".result4").css("color","blue");
pwreChk=true;
return true;
}else{
$(".result4").html("비밀번호가 일치하지 않습니다.");
$(".result4").css("color","red");
return false;
}
});
//이름
$("[name=memberName]").keyup(function(){
var name = $(this).val();
var value = /^[가-힣]{2,6}$/;
if(value.test(name)){
$(".result5").html("이름이 올바르게 입력됐습니다.");
$(".result5").css("color","blue");
nameChk=true;
return true;;
}else{
$(".result5").html("이름은 한글 2~6글자로 입력해주세요.");
$(".result5").css("color","red");
return false;
}
});
//휴대폰번호
$("[name=phone]").keyup(function(){
var phone = $(this).val();
var value = /^010-([0-9]{4})-([0-9]{4})$/;
if(value.test(phone)){
$(".result6").html("휴대폰 번호가 올바르게 입력됐습니다.");
$(".result6").css("color","blue");
phoneChk=true;
return true;
}else{
$(".result6").html("010-0000-0000 형식대로 입력해주세요.");
$(".result6").css("color","red");
return false;
}
});
//체크박스 전체 선택
$('#allCheck').on('click',function(){
if($('#allCheck').is(':checked')){
$('.priBox').prop('checked',true);
$('#agree').val(1);
}else{
$('.priBox').prop('checked',false);
$('#agree').val(9);
}
});
//체크박스 값 변경 0:필수동의 1:전체체크 9:아무것도안함
$(".priBox").on("click", function(){
if($(".priBox").eq(0).is(":checked") && $(".priBox").eq(1).is(":checked") && $(".priBox").eq(2).is(":checked")){
$('#agree').val(1); // 전체체크
}else if($(".priBox").eq(0).is(":checked") && $(".priBox").eq(1).is(":checked")){
$('#agree').val(0); // 필수체크
}else if($(".priBox").eq(0).is(":checked") && $(".priBox").eq(2).is(":checked")){
$('#agree').val(9); // 아무것도안함
}else if($(".priBox").eq(1).is(":checked") && $(".priBox").eq(2).is(":checked")){
$('#agree').val(9); // 아무것도안함
}
});
});
join.css
@charset "UTF-8";
.agree{
color:black;
}
button:active {
position: relative;
background-color: lightgray;
}
.join_wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f8f8fa;
overflow-y: scroll;
}
.join_wrap .join_container{
width: 600px;
margin: 150px auto 210px;
}
.join_wrap .join_cont{
background: #fff;
padding: 50px 45px 60px;
}
.btn_wrap{
padding: 30px 0 0;
}
.btn_wrap a{
display: block;
line-height: 60px;
border-radius: 5px;
background: #D35460;
text-align: center;
font-size: 15px;
color: #fff;
font-weight:bold;
letter-spacing:-0.5px;
text-decoration: none;
}
.join_wrap .join_cont>p{
font-size: 15px;
color: #828282;
letter-spacing: -0.5px;
line-height: 1.5;
}
.gender, .age{
display: inline;
}
#joinsubmit{
width:100%;
line-height: normal;
}
.in-line{
width:100%;
display:flex;
}
#memberIdChk, #emailbutton{
width:40%;
line-height: normal;
}
.Mate_logo a{
font-size:40px;
font-family: "logo";
color: #956bfc;
text-decoration: none;
line-height: 60px;
}
.Mate_logo{
text-align: center;
padding-bottom: 10px;
}
@controller
//회원가입 이동
@RequestMapping(value="/joinFrm.do")
public String joinFrm() {
return "member/joinFrm";
}
//메이트 회원가입 이동
@RequestMapping(value="/joinMate")
public String joinMate() {
return "member/joinMate";
}
//회원가입
@RequestMapping(value="/join1.do")
public String join1(Member member, MultipartFile uploadFile, HttpServletRequest request, Model model){
if(uploadFile.isEmpty()) { //첨부파일이 없는경우
}else { //첨부파일이 있는경우
String savePath = request.getSession().getServletContext().getRealPath("/resources/upload/member/");
//파일처리(파일업로드)
String filename = uploadFile.getOriginalFilename();
String onlyFilename = filename.substring(0,filename.indexOf("."));
String extention = filename.substring(filename.indexOf("."));
//실제 업로드 할 파일명을 저장할 변수
String filepath = null;
//파일명 중복 시 숫자를 붙이는 코드
int count = 0;
while(true) {
if(count == 0) {
filepath = onlyFilename + extention;
}else {
filepath = onlyFilename + "_" + count + extention;
}
File checkFile = new File(savePath+filepath);
if(!checkFile.exists()) {
break;
}
count++;
}
try {
//System.out.println(savePath+filepath);
FileOutputStream fos = new FileOutputStream(new File(savePath+filepath));
//업로드 속도증가를 위한 보조스트림
BufferedOutputStream bos = new BufferedOutputStream(fos);
//파일업로드
byte[] bytes = uploadFile.getBytes();
bos.write(bytes);
bos.close();
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
member.setFilepath(filepath);
}// else
//System.out.println("join1 " +member.toString());
int result = service.join(member);
if(result > 0) { // 성공
model.addAttribute("msg","회원가입 성공하였습니다~!");
model.addAttribute("loc","/");
}else {
model.addAttribute("msg","회원가입 실패하였습니다.");
model.addAttribute("loc","/joinMate");
}
return "common/msg";
}
//회원가입_아이디 중복체크
@ResponseBody
@RequestMapping(value="/IdCheck.do")
public String idCheck(String memberId){
Member m = service.idCheck(memberId);
if(m == null) {
return "1"; //사용가능 아이디
}else {
return "2"; //사용불가 아이디
}
}
//회원가입_이메일 중복체크
@ResponseBody
@RequestMapping(value="/emailCheck.do")
public String emailCheck(String email) {
Member m = service.emailCheck(email);
if(m == null) {
return "2"; //사용가능 이메일
}else {
return "3"; //사용불가 이메일
}
}
//이메일 인증
@ResponseBody
@RequestMapping(value="/mailCheck")
public String mailCheck(String email){
//뷰(View)로부터 넘어온 데이터 확인
System.out.println("이메일 데이터 전송 확인");
System.out.println("인증번호 : " + email);
//인증번호(난수) 생성
Random random = new Random();
int checkNum = random.nextInt(888888) + 111111;
System.out.println("인증번호 : " + checkNum);
// 이메일 보내기
String setFrom = "ohmate123@gmail.com";
String toMail = email;
String title = "회원가입 인증 이메일 입니다.";
String content =
"(주)오나의메이트를 방문해주셔서 감사합니다." +
"<br><br>" +
"인증 번호는 " + checkNum + "입니다." +
"<br>" +
"해당 인증번호를 인증번호 확인란에 기입하여 주세요.";
try {
MimeMessage message = mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
helper.setFrom(setFrom);
helper.setTo(toMail);
helper.setSubject(title);
helper.setText(content,true);
mailSender.send(message);
}catch(Exception e) {
e.printStackTrace();
}
String num = Integer.toString(checkNum);
return num;
}
@service
//회원가입
@Transactional
public int join(Member m) {
return dao.join(m);
}
//회원가입_아이디 중복체크
public Member idCheck(String memberId) {
return dao.idCheck(memberId);
}
//회원가입_이메일 중복체크
public Member emailCheck(String email) {
return dao.emailCheck(email);
}
@dao
//메이트 회원가입
public int join(Member m) {
return sqlSession.insert("member.join",m);
}
//회원가입_아이디 중복체크
public Member idCheck(String memberId) {
return sqlSession.selectOne("member.idCheck",memberId);
}
//회원가입_이메일 중복체크
public Member emailCheck(String email) {
return sqlSession.selectOne("member.emailCheck",email);
}
@memberSQL.xml
<!-- 메이트 회원가입 -->
<insert id="join" parameterType="m">
insert into member values(member_seq.nextval,#{memberId},#{memberPw},#{memberName},#{phone},#{email},to_char(sysdate,'yyyy-mm-dd'),
#{filepath},#{memberLevel},#{gender},#{age},#{profileStatus})
</insert>
<!-- 회원가입_아이디 중복체크 / 마이페이지 -->
<select id="idCheck" parameterType="m" resultType="m">
select
member_no as memberNo,
member_id as memberId,
member_pw as memberPw,
member_name as memberName,
phone,
email,
enroll_date as enrollDate,
member_filepath as filepath,
member_level as memberLevel,
gender,
age,
profile_status as profileStatus
from member where member_id=#{memberId}
</select>
<!-- 회원가입_이메일 중복체크 -->
<select id="emailCheck" parameterType="m" resultType="m">
select
member_no as memberNo,
member_id as memberId,
member_pw as memberPw,
member_name as memberName,
phone,
email,
enroll_date as enrollDate,
member_filepath as filepath,
member_level as memberLevel,
gender,
age,
profile_status as profileStatus
from member where email=#{email}
</select>
이메일 인증번호는 아래 참고!!!
https://kimvampa.tistory.com/107?category=771727
[Spring][쇼핑몰 프로젝트][4] 인증번호 이메일 전송(3)
프로젝트 Github : https://github.com/sjinjin7/Blog_Project 프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188 목표 이번 포스팅에선 인증번호가 뷰와 이메일로 정상적으로 전송되었을 때 인..
kimvampa.tistory.com
반응형
'spring > 로그인&회원가입' 카테고리의 다른 글
| [spring/mybatis] 아이디/비밀번호 찾기 (0) | 2021.12.03 |
|---|---|
| [spring/mybatis] 로그인/ 로그아웃 기능 (0) | 2021.12.02 |
