728x90
📍 회원가입 유효성 검사
1. js 파일 생성
- jsp와 js 연결 하기
<!-- signUp.js 연결 -->
<script src="${contextPath}/resources/js/member/signUp.js"></script>
2. HTML 파일
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KH커뮤니티</title>
<link rel="stylesheet" href="../resources/css/main-style.css">
<link rel="stylesheet" href="../resources/css/singUp-style.css">
<script src="https://kit.fontawesome.com/7bc7245179.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<!-- header include -->
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<!-- 회원가입 -->
<section class="signUp-content">
<!-- 회원가입 화면 전환 주소(GET)와 같은 주소로 실제 회원가입을 요청(POST)
-> 욜청 주소가 같아도 데이터 전달 방식이 다르면 중복 허용
-->
<!--
절대경로 :/community/member/signUp
현재주소 :/community/member/signUp
상대경로 : signUp
-->
<form action="signUp" method="POST" name="signUp-form" onsubmit="return signUpValidate()">
<label for="memberEmail"> <span class="required">*</span>
아이디(이메일)
<div class="signUp-input-area">
<input type="text" id="memberEmail" name="memberEmail" placeholder="아이디(이메일)"
maxlength="30" autocomplete="off" required>
<!-- autocomplete="off" : 자동완성 미사용 -->
<!-- required : 필수 작성 input 태그 -->
<button type="button">인증번호 받기</button>
</div> <span class="signUp-message" id="emailMessage">메일을 받을 수 있는 이메일을 입력해주세요.</span>
</label> <label for="emailCheck"> <span class="required">*</span>
인증번호
</label>
<div class="signUp-input-area">
<input type="text" id="emailCheck" name="emailCheck" placeholder="인증번호 입력" maxlength="6"
autocomplete="off">
<button type="button">인증하기</button>
</div>
<span class="signUp-message confirm">인증되었습니다.</span> <label for="memberPw"> <span
class="required">*</span> 비밀번호
</label>
<div class="signUp-input-area">
<input type="password" id="memberPw" name="memberPw" placeholder="비밀번호" maxlength="30">
</div>
<div class="signUp-input-area">
<input type="password" id="memberPwConfirm" placeholder="비밀번호 확인" maxlength="30">
</div>
<span class="signUp-message" id="pwMessage">영어, 숫자, 특수문자(!,@,#,-,_)6~30글자 사이로 작성해주세요.</span> <label for="memberNickname">
<span class="required">*</span> 닉네임
</label>
<div class="signUp-input-area">
<input type="text" id="memberNickname" name="memberNickname" placeholder="닉네임"
maxlength="10">
</div>
<span class="signUp-message" id="nicknameMessage">영어/숫자/한글 2~10글자 사이로 작성해주세요.</span>
<label for="memberTel">
<span class="required">*</span> 전화번호
</label>
<div class="signUp-input-area">
<input type="text" id="memberTel" name="memberTel" placeholder="(- 없이 숫자만 입력)"
maxlength="11">
</div>
<span class="signUp-message" id="telMessage">전화번호를 입력해주세요.(-제외)</span>
<label for="memberAddress"> <span class="required">*</span> 주소
</label>
<div class="signUp-input-area">
<input type="text" id="memberAddress" name="memberAddress" placeholder="우편번호" maxlength="6">
<button type="button">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세주소">
</div>
<button type="submit" id="signUp-btn">가입하기</button>
</form>
</section>
</main>
<!-- footer include -->
<jsp:include page="/WEB-INF/views/common/footer.jsp" />
<!-- signUp.js 연결 -->
<script src="${contextPath}/resources/js/member/signUp.js"></script>
</body>
</html>3. JS 파일 전체 코드
/* signUp.js */
// 유효성 검사 여부를 기록할 객체 생성
const checkObj = {
"memberEmail" : false,
"memberPw" : false,
"memberPwConfirm" : false,
"memberNickname" : false,
"memberTel" : false
};
//전화번호 유효성 검사
const memberTel = document.getElementById("memberTel");
const telMessage = document.getElementById("telMessage");
// ** input 이벤트 **
// -> 입력과 관련된 모든 동작 (Key 관련 mouse 관련 붙어넣기)
memberTel.addEventListener("input", function () {
//입력이 되지 않은 경우
if (memberTel.value.trim().length == 0) {
telMessage.innerText = "전화번호를 입력해주세요!!!!!!!!!.(-제외)";
//telMessage.classList.remove("error");
//telMessage.classList.remove("confirm")
telMessage.classList.remove("confirm", "error")
//유효하지 않은 상태임을 기록 (11_객체.js 복습하기 !)
checkObj.memberTel = false;
/* 입력이 되지 않으면 밑에 코드 수행하지 않게 return 작성 */
return;
}
// 전화번호 정규식
const regExp = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;
if (regExp.test(memberTel.value)) { //유효한 경우
telMessage.innerText = "유효한 전화번호 형식입니다.";
telMessage.classList.add("confirm")
telMessage.classList.remove("error")
//유효한 상태임을 기록
checkObj.memberTel = true;
} else { //유효하지 않은 경우
telMessage.innerText = "전화번호 형식이 올바르지 않습니다.";
telMessage.classList.add("error")
telMessage.classList.remove("confirm")
//유효하지 않은 상태임을 기록
checkObj.memberTel = false;
}
})
// 이메일 유효성 검사
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");
memberEmail.addEventListener("input", function () {
//입력이 되지 않은 경우
if (memberEmail.value.trim().length == 0) {
emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해주세요."
emailMessage.classList.remove("confirm", "error")
//유효하지 않은 상태임을 기록
checkObj.memberEmail = false;
return;
}
//입력된 경우
const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;
if (regExp.test(memberEmail.value)) {
emailMessage.innerText = "유효한 이메일 형식입니다.";
emailMessage.classList.add("confirm");
emailMessage.classList.remove("error");
//유효한 상태임을 기록
checkObj.memberEmail = true;
// **************** 이메일 중복 검사(ajax) 진행 예정 ****************
} else {
emailMessage.innerText = "유효하지 않은 이메일 형식입니다.";
emailMessage.classList.add("error");
emailMessage.classList.remove("confirm");
//유효하지 않은 상태임을 기록
checkObj.memberEmail = false;
}
})
// 닉네임 유효성 검사
const memberNickname = document.getElementById("memberNickname")
const nicknameMessage = document.getElementById("nicknameMessage")
memberNickname.addEventListener("input", function () {
//입력되지 않은 경우
if (memberNickname.value.trim().length == 0) {
nicknameMessage.innerText = "영어/숫자/한글 2~10글자 사이로 작성해주세요."
nicknameMessage.classList.remove("confirm", "error")
//유효하지 않은 상태임을 기록
checkObj.memberNickname = false;
return;
}
const regExp = /^[a-zA-Z0-9가-힣]{2,10}$/
if (regExp.test(memberNickname.value)) { // 유효한 경우
nicknameMessage.innerText = "유효한 닉네임 형식입니다.";
nicknameMessage.classList.add("confirm");
nicknameMessage.classList.remove("error");
//유효하지 않은 상태임을 기록
checkObj.memberNickname = true;
// **************** 닉네임 중복 검사(ajax) 진행 예정 ****************
} else {
nicknameMessage.innerText = "닉네임 형식이 유효하지 않습니다.";
nicknameMessage.classList.add("error");
nicknameMessage.classList.remove("confirm");
//유효하지 않은 상태임을 기록
checkObj.memberNickname = false;
}
})
//비밀번호 유효성 검사
const memberPw = document.getElementById("memberPw")
const memberPwConfirm = document.getElementById("memberPwConfirm")
const pwMessage = document.getElementById("pwMessage")
memberPw.addEventListener("input", function () {
//입력이 되지 않은 경우
if (memberPw.value.trim().length == 0) {
pwMessage.innerText = "영어, 숫자, 특수문자(!,@,#,-,_)6~30글자 사이로 작성해주세요.";
pwMessage.classList.remove("confirm", "error")
//유효하지 않은 상태임을 기록
checkObj.memberPw = false;
return;
}
const regExp = /^[\w!@#_-]{6,30}$/;
if (regExp.test(memberPw.value)) { // 비밀번호 유효한 경우
//유효하지 않은 상태임을 기록
checkObj.memberPw = true;
if (memberPwConfirm.value.trim().length == 0) { // 비밀번호 유효, 확인 작성 X
pwMessage.innerText = "유효한 비밀번호 형식입니다.";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
} else { // 비밀번호 유효, 확인 작성 O
checkPw() // 비밀번호 일치 검사 함수
}
} else {
pwMessage.innerText = "비밀번호 형식이 유효하지 않습니다.";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
//유효하지 않은 상태임을 기록
checkObj.memberPw = false;
}
});
// 비밀번호 확인 유효성검사
//함수명() : 함수 호출(수행)
//함수명 : 함수에 작성된 코드 반환
memberPwConfirm.addEventListener("input", checkPw);
// -> 이벤트가 발생되었을때 정의된 함수를 호출하겠다.
// 비밀번호 일치 여부 검사
function checkPw() {
//비밀번호 / 비밀번호 확인이 같을 경우
if (memberPw.value == memberPwConfirm.value) {
pwMessage.innerText = "비밀번호가 일치합니다.";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
//유효하지 않은 상태임을 기록
checkObj.memberPwConfirm = true;
} else {
pwMessage.innerText = "비밀번호가 일치하지 않습니다.";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
//유효하지 않은 상태임을 기록
checkObj.memberPwConfirm = false;
}
}
// 회원가입 버튼 클릭 시 유효성 검사가 완료 되었는지 확인하는 함수
function signUpValidate() {
//checkObj에 있는 모든 속성을 반복 접근하여
//false가 하나라도 있는 경우에는 form 태그 기본 이벤트 제거
let str;
//객체용 향상된 for문
for(let key in checkObj){
//현재 접근 중인 key의 value가 false 인 경우 실행이된다 !
if(!checkObj[key]){
switch(key){
case "memberEmail" : str="이메일이"; break;
case "memberPw" : str="비밀번호가"; break;
case "memberPwConfirm" : str="비밀번호 확인이"; break;
case "memberNickname" : str="닉네임이"; break;
case "memberTel" : str="전화번호가"; break;
}
str+=" 유효하지 않습니다.";
alert(str)
document.getElementById(key).focus();
return false; //form 태그 기본 이벤트 제거
}
}
return true; //form 태그 기본 이벤트 수행
}💡 input 이벤트 : 입력과 관련된 모든 동작 (key / mouse 관련 붙여넣기)
정규식 :
전화번호 : /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;
이메일 : /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;
닉네임 : /^[a-zA-Z0-9가-힣]{2,10}$/
비밀번호 :/^[\w!@#_-]{6,30}$/;
728x90
'ON > Servlet' 카테고리의 다른 글
| [Servlet] Ajax란? Ajax를 이용해서 이메일 중복검사하기 (0) | 2023.07.14 |
|---|---|
| 유효성 일치 여부 (0) | 2023.07.12 |
| 내 정보 수정하기 (0) | 2023.07.11 |
| 내 정보 보기 (0) | 2023.07.10 |
| 비밀번호 암호화 하기 (0) | 2023.07.10 |
