<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layouts/layout.html">
<head>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript" th:src="@{/js/login_infomain.js}"></script>
</head>
<body>
<div layout:fragment="content">
<div class="container w-50 shadow rounded border p-5 mt-5">
<h1 class="text-center mb-4">회원가입</h1>
<form method="POST" action="/capoeiraweb/login_info">
<div class="form-group mb-3">
<label for="id">아이디:</label>
<div class="input-group">
<input type="text" class="form-control" id="id" name="id" required><br>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" id="check-btn" onclick="idCheck()">중복체크</button>
</div>
</div>
<p id="checkResult"></p>
</div>
<div class="form-group mb-3">
<label for="password">비밀번호:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group mb-3">
<label for="password-confirm">비밀번호 확인:</label>
<input type="password" class="form-control" id="password-confirm" name="password-confirm" required>
<div id="passwordCheckResult"></div>
<button type="button" class="btn btn-outline-secondary" id="checkk-btn" onclick="pwCheck()">중복체크</button>
</div>
<div class="form-group mb-3">
<label for="cagroup">그룹:</label>
<select class="form-control" id="cagroup" name="cagroup" required>
<option value="">선택하세요</option>
<option value="ABADA">ABADA</option>
<option value="MUZENZA">MUZENZA</option>
</select>
</div>
<div class="form-group mb-3">
<label for="name">이름:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group mb-3">
<label for="nickname">별명:</label>
<input type="text" class="form-control" id="nickname" name="nickname" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary" value="회원가입">회원가입</button>
</div>
</form>
</div>
</div>
</body>
</html>Entity(DB테이블 작성)
package capoeira.capoeiraweb.entity;
import capoeira.capoeiraweb.dto.MemberDTO;
import lombok.Getter;
import lombok.Setter;
import javax.persistence.*;
@Entity
@Setter
@Getter
@Table(name = "member_table")
public class MemberEntity {
// no,pk(@Id) id,uk
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long no;
@Column(unique = true)
private String id;
@Column
private String password;
@Column
private String cagroup;
@Column
private String name;
@Column
private String nickname;
public static MemberEntity toMemberEntity(MemberDTO memberDTO) {
MemberEntity memberEntity = new MemberEntity();
memberEntity.setId(memberDTO.getId());
memberEntity.setPassword(memberDTO.getPassword());
memberEntity.setCagroup(memberDTO.getCagroup());
memberEntity.setName(memberDTO.getName());
memberEntity.setNickname(memberDTO.getNickname());
return memberEntity;
}
}중복 체크 실패
중복 체크 성공
login_infomain.js
const idCheck = () => {
const id = document.getElementById("id").value;
const checkResult = document.getElementById("checkResult");
console.log("입력값 :", id);
$.ajax({
type: "post",
url: "/capoeiraweb/member/idCheck",
data: {
"id": id
},
success: function(res) {
console.log("요청성공", res);
if (res == "ok") {
checkResult.style.color = "green";
checkResult.innerHTML = "사용가능한 아이디 입니다.";
} else {
checkResult.style.color = "red";
checkResult.innerHTML = "이미 사용중인 아이디 입니다.";
}
},
error: function(err) {
console.log("에러발생", err);
}
});
}
const pwCheck = () => {
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("password-confirm").value;
if (password === confirmPassword) {
passwordCheckResult.style.color = "green";
passwordCheckResult.innerHTML = "비밀번호가 일치합니다.";
} else {
passwordCheckResult.style.color = "red";
passwordCheckResult.innerHTML = "비밀번호가 일치하지 않습니다.";
}
}
비전공 신입 개발자