에러 탈출 일지
[Spring] 회원가입 페이지 만들기 (중복체크, 유효성 검사) 본문
join.jsp 파일에 회원가입 폼을 만들어주고 스크립트에 중복체크 및 유효성 체크를 해준다.
<main>
<div class="form-wrapper">
<form id="joinForm" action="/user/join.do" method="post">
<h2>회원가입</h2>
<p>ACLearn에서 새로운 성장의 기회를 얻으세요.</p><br>
<div class="input-area">
<div class="input-wrapper" >
<label for="userId" >아이디</label>
</div>
<div>
<input type="text" id="userId" name="userId" size="38"
placeholder="영문, 숫자 조합으로 8~16자리" required >
<button type="button" id="btnIdCheck" style="width: 70px; height: 40px;">중복체크</button>
</div>
<p id="idValidation" style="color:red; font-size:0.5rem;">
아이디는 영문, 숫자 조합의 8~16자리로 설정해주세요.
</p>
<div class="input-wrapper" >
<label for="userPw">비밀번호</label>
</div>
<div>
<input type="password" id="userPw" name="userPw" size="50"
placeholder="영문, 숫자, 특수문자 조합으로 8~16자리" required>
</div>
<p id="pwValidation" style="color:red; font-size:0.5rem;">
비밀번호는 영문, 숫자, 특수문자 조합의 8~16자리로 설정해주세요.
</p>
<div class="input-wrapper" >
<label for="userPwCheck">비밀번호 확인</label>
</div>
<div>
<input type="password" id="userPwCheck" name="userPwCheck" size="50"
placeholder="영문, 숫자, 특수문자 조합으로 8~16자리" required>
</div><br>
<p id="pwCheckResult" style="font-size:0.8rem;">
</p>
<div class="input-wrapper" >
<label for="userName">이름</label>
</div>
<div>
<input type="text" id="userName" name="userName" size="50"
placeholder="이름" required>
</div>
<div class="input-wrapper" >
<label for="userNickname">닉네임</label>
</div>
<div>
<input type="text" id="userNickname" name="userNickname" size="38"
placeholder="영문, 한글, 숫자 조합으로 2~10자리"required>
<button type="button" id="btnNickCheck" style="width: 70px; height: 40px;">중복체크</button>
</div>
<p id="nickValidation" style="color:red; font-size:0.5rem;">
닉네임은 영문, 한글, 숫자 조합의 2~10자리로 설정해주세요.
</p>
<div class="input-wrapper" >
<label for="userBirth">생년월일</label>
</div>
<div>
<input type="text" id="userBirth" name="userBirth" size="50"
placeholder="생년월일 8자리(ex.19001201)" >
</div><br>
<div style="display: block; margin: 20px auto;">
<button type="submit" id="btnJoin">확 인</button>
</div>
</div>
</form>
</div>
</main>
Controller → Service → Serviceimpl → DAO → mapper
< Controller >
아이디 - 중복체크 및 유효성 검사
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// 회원가입 화면으로 이동
@GetMapping("/join.do")
public String joinView() {
return "user/join";
}
// 회원가입 진행
@PostMapping(value="/join.do", produces="application/text; charset=UTF-8")
public String join(UserVO userVO, Model model) {
int joinResult = userService.join(userVO);
if(joinResult == 0) {
model.addAttribute("joinMsg", "회원가입에 실패하셨습니다. 관리자에게 문의해주세요.");
return "/user/join";
}
model.addAttribute("joinMsg", "회원가입에 성공했습니다. 로그인해주세요.");
return "user/login";
}
// 아이디 중복체크
@PostMapping("/idCheck.do")
@ResponseBody
public String idCheck(UserVO userVO) throws JsonProcessingException {
String returnStr ="";
int idCnt=userService.idCheck(userVO.getUserId());
// 아이디가 중복일 때
if(idCnt > 0) {
returnStr ="duplicatedId";
}else {
returnStr = "idOk";
}
return returnStr;
}
}
< Service >
public interface UserService {
// 회원가입
int join(UserVO userVO);
// 아이디 중복체크
int idCheck(String userId);
}
< Serviceimpl >
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDAO userDAO;
// 회원가입
@Override
public int join(UserVO userVO) {
return userDAO.join(userVO);
}
// 아이디 중복체크
@Override
public int idCheck(String userId) {
return userDAO.idCheck(userId);
}
}< DAO >
@Repository
public class UserDAO {
@Autowired
private SqlSessionTemplate mybatis;
// 회원가입
public int join(UserVO userVO) {
return mybatis.insert("UserDAO.join",userVO);
}
// 아이디 중복체크
public int idCheck(String userId) {
return mybatis.selectOne("UserDAO.idCheck",userId);
}
}
mapper.xml 파일에 쿼리문 작성
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="UserDAO">
<!-- 쿼리 작성 영역 -->
<insert id="join" parameterType="user">
<![CDATA[
INSERT INTO AL_USER(
USER_ID,
USER_PW,
USER_NAME,
USER_NICKNAME,
USER_BIRTH,
USER_REGDATE,
USER_MODFDATE,
USER_USE_YN
) VALUES (
#{userId},
#{userPw},
#{userName},
#{userNickname},
#{userBirth},
NOW(),
NOW(),
'Y'
)
]]>
</insert>
</mapper>< script >
아이디 - 중복체크 및 유효성 검사
<script>
$(function(){
// 아이디 중복체크 했는지 확인
var checkId = false;
// 아이디가 형식에 맞는지
var idValidation = false;
// 닉네임 중복체크
var nicknameCheck = false;
// 닉네임이 형식에 맞는지
var nickValidation = false;
$("#idValidation").hide();
$("#nickValidation").hide();
// 아이디 중복체크
$("#btnIdCheck").on("click",function(){
console.log($("#joinForm").serialize());
console.log($("#joinForm"));
$.ajax({
url: '/user/idCheck.do',
type: 'post',
data: $("#joinForm").serialize(),
success: function(obj){
console.log(obj);
if(obj == 'duplicatedId'){
alert("중복된 아이디입니다.");
$("#userId").focus();
} else {
if(confirm("사용 가능한 아이디 입니다. '" + $("#userId").val() +
"'를(을) 사용하시겠습니까?")) {
checkId = true;
$("#btnIdCheck").attr("disabled", true);
}
}
},
error: function(e){
console.log(e);
}
})
});
// 아이디 중복체크 후 다시 아이디를 변경했을 때
$("#userId").on("change",function(){
checkId = false;
$("#btnIdCheck").attr("disabled", false);
});
// 아이디 유효성 - 영문, 숫자 조합으로 8~16자리
$("#userId").on("change", function(){
var regexId = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,16}$/;
var resultId = regexId.exec($("#userId").val());
if(resultId != null){
$("#idValidation").hide();
}else{
$("#idValidation").show();
$("#userId").focus();
$("#btnIdCheck").attr("disabled", true);
}
});
});
</script>- ajax 이용
- 아이디 중복체크 했는데 또 다시 아이디 변경하면 중복체크한 버튼 다시 눌리도록 설정해줌.
< script >
비밀번호 - 일치 및 유효성 검사
<script>
$(function(){
// 비밀번호가 형식에 맞는지
var pwValidation = false;
// 비밀번호 확인란과 일치하는지
var pwCheck = false;
$("#pwValidation").hide();
$("#pwCheckResult").hide();
// 비밀번호 유효성 검사 - 영문, 숫자, 특수문자 조합으로 8~16자리
function validatePassword(character){
return /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*+=-])(?=.*[0-9]).{8,16}$/.test(character);
}
// 비밀번호 입력될때마다 유효성 검사
$("#userPw").on("change",function(){
// 비밀번호 유효성 처리
if(!validatePassword($("#userPw").val())){
pwValidation = false;
$("#pwValidation").show();
$("#userPw").focus();
} else {
pwValidation = true;
$("#pwValidation").hide();
}
// 비밀번호 확인까지 입력한 후 다시 비밀번호 재설정할 경우
if($("#userPw").val() == $("#userPwCheck").val()){
pwCheck = true;
$("#pwCheckResult").css("color", "green");
$("#pwCheckResult").text("비밀번호가 일치합니다.");
} else {
pwCheck = false;
$("#pwCheckResult").css("color", "red");
$("#pwCheckResult").text("비밀번호가 일치하지 않습니다.");
}
});
// 비밀번호 확인란 입력할 때 일치하는지
$("#userPwCheck").on("change", function(){
$("#pwCheckResult").show();
if($("#userPw").val() == $("#userPwCheck").val()){
pwCheck = true;
$("#pwCheckResult").css("color", "green");
$("#pwCheckResult").text("비밀번호가 일치합니다.");
} else {
pwCheck = false;
$("#pwCheckResult").css("color", "red");
$("#pwCheckResult").text("비밀번호가 일치하지 않습니다.");
}
});
});
</script>비밀번호는 입력할때마다 유효성 검사하게 설정
< Controller >
닉네임 - 중복체크 및 유효성 검사
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// 닉네임 중복체크
@PostMapping("/nicknameCheck.do")
@ResponseBody
public String nicknameCheck(UserVO userVO) throws JsonProcessingException {
System.out.println(userVO.getUserNickname());
String returnStr ="";
int nickCnt=userService.nicknameCheck(userVO.getUserNickname());
if(nickCnt > 0) {
returnStr ="duplicatedNickname";
}else {
returnStr = "nicknameOk";
}
return returnStr;
}
}service , serviceimpl, DAO 파일 모두 위에 아이디 중복체크와 같은 방식으로 작성
mappte.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="UserDAO">
<!-- 쿼리 작성 영역 -->
<select id="nicknameCheck" parameterType="String" resultType="int">
SELECT COUNT(USER_NICKNAME)
FROM AL_USER
WHERE USER_NICKNAME = #{userNickname}
</select>
</mapper>
< script >
닉네임 - 중복체크 및 유효성 검사
<script>
$(function(){
// 닉네임 중복체크
var nicknameCheck = false;
// 닉에임이 형식에 맞는지
var nickValidation = false;
$("#nickValidation").hide();
// 닉네임 중복체크
$("#btnNickCheck").on("click",function(){
$.ajax({
url: '/user/nicknameCheck.do',
type: 'post',
data: $("#joinForm").serialize(),
success: function(obj){
console.log(obj);
if(obj == 'duplicatedNickname'){
alert("중복된 닉네임 입니다.");
$("#userNickname").focus();
} else {
if(confirm("사용 가능한 닉네임 입니다. '" + $("#userNickname").val() +
"'를(을) 사용하시겠습니까?")) {
nicknameCheck = true;
$("#btnNickCheck").attr("disabled", true);
}
}
},
error: function(e){
console.log(e);
}
})
});
// 닉네임 중복체크 후 다시 변경
$("#userNickname").on("change",function(){
nicknameCheck = false;
$("#btnNickCheck").attr("disabled", false);
});
// 닉넴 유효성 - 영문, 한글, 숫자 조합으로 2~10자리
$("#userNickname").on("change", function(){
var regexNick = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/;
var resultNick = regexNick.exec($("#userNickname").val());
if(resultNick != null){
$("#nickValidation").hide();
}else{
$("#nickValidation").show();
$("#userNickname").focus();
$("#btnNickCheck").attr("disabled", true);
}
});
});
</script>
중복체크 하지 않고 회원가입 버튼 클릭시
<script>
$(function(){
// 회원가입 제출했을 때
$("#joinForm").on("submit", function(e){
// 아이디 중복체크가 안됐거나, 중복된 아이디 사용했을 때
if(!checkId) {
alert("아이디 중복체크를 진행하세요.");
$("#userId").focus();
e.preventDefault();
return false;
}
// 비밀번호 유효성 검사가 틀렸을 때
if(!pwValidation){
alert("영문, 숫자, 특수문자 조합의 8~16자리로 설정하세요.");
$("#userPw").focus();
e.preventDefault();
return;
}
// 비밀번호와 비밀번호 확인이 일치하지 않을 때
if(!pwCheck) {
alert("비밀번호가 일치하지 않습니다.");
$("#userPwCheck").focus();
e.preventDefault();
return;
}
// 닉네임 중복체크
if(!nicknameCheck) {
alert("닉네임 중복체크를 진행하세요.");
$("#userNickname").focus();
e.preventDefault();
return false;
}
// 모두 true일 경우 아무것도 작성하지 X
alert("회원가입이 완료되었습니다!");
});
});
</script>
회원가입 성공
<script>
$(function() {
//회원가입 성공 시 메시지 출력
if($("#joinMsg").val() != "" && $("#joinMsg").val() != null) {
alert($("#joinMsg").val());
}
</script>
'개발 > Mini Project' 카테고리의 다른 글
| [Spring] 아이디 찾기, 비밀번호 찾기 (0) | 2022.12.29 |
|---|---|
| [Spring] 로그인 페이지 만들기 (0) | 2022.12.29 |
| [JavaScript]성적 확인 프로그램 (0) | 2022.10.20 |
'개발/Mini Project' Related Articles
more
