Skip to content

validation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kimtaeyeon04 wants to merge 1 commit into
base: main
Choose a base branch
from
+358 −0
Open

validation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions validation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(177, 215, 231);
min-height: 100vh;
}


.wrapper{
width: 500px;
height: 500px;
background-color: rgb(231, 245, 251);
border-radius: 2%;
display: flex; /* 요소를 가로로 정렬하기 위해 추가 */
flex-direction: column; /* 내부 요소를 세로로 정렬하기 위해 추가 */
justify-content: center; /* 내부 요소를 수직 가운데 정렬하기 위해 추가 */
align-items: center; /* 내부 요소를 수평 가운데 정렬하기 위해 추가 */
}


.wrapper h3{
/*padding-top: 10px;*/
font-size: 25px;
text-align: center;
}

.wrapper hr{
margin-top: 10px;
width: 300px;

}

.wrapper p{
font-size: 13px;
}
.wrapper .input-box{
margin: 10px;
width: 100%;


}

.input-box input{
width: 100%;
border: none;
outline: none;
border: 2px solid white;
background-color: transparent;
border-radius: 5px;
height: 30px;
padding: 5px;
}

.wrapper button{
width: 70%;
height: 35px;
border-radius: 10px;
outline: none;
border: none;
background-color: rgb(136, 121, 116);
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 30px;
}


.modal {
justify-content: center;
align-items: center;
display: none; /* 모달은 처음에 숨겨져 있어야 합니다. */
position: fixed; /* 화면에 고정된 위치에 표시됩니다. */
z-index: 1; /* 모달을 화면의 최상위로 설정합니다. */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 모달을 수직 가운데 정렬합니다. */
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 30%;
text-align: center;
}




.wrapper h4{
margin-top: 20px;
justify-content: center;
align-items: center;
font-size: 20px;
}

.wrapper h5{
margin-top: 30px;
justify-content: center;
align-items: center;
font-size: 14px;
}


.close {
background-color: #ddd; /* 버튼의 배경색 */
border: none; /* 테두리 제거 */
color: #fff; /* 버튼의 텍스트 색상 */
padding: 10px 15px; /* 버튼의 여백 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none; /* 링크 텍스트의 밑줄 제거 */
display: inline-block; /* 인라인 블록 요소로 설정하여 여백이나 크기를 설정할 수 있도록 함 */
font-size: 14px; /* 텍스트 크기 설정 */
cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능하도록 함 */
border-radius: 5px; /* 버튼의 모서리를 둥글게 만듦 */
float: right;

}
61 changes: 61 additions & 0 deletions validation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="validation.css" rel="stylesheet">
<title>validation</title>
</head>
<body>
<div class="wrapper">
<form id="myForm">
<h3>회원가입</h3>
<hr color="white">

<div class="input-box">
<p>이름</p>
<input type="text" id="nameInput">
<p id="nameMessage" class="message"></p>
</div>

<div class="input-box">
<p>이메일</p>
<input type="email" id="emailInput">
<p id="emailMessage" class="message"></p>
</div>

<div class="input-box">
<p>나이</p>
<input type="text" id="ageInput">
<p id="ageMessage" class="message"></p>
</div>

<div class="input-box">
<p>비밀번호</p>
<input type="password" id="passInput">
<p id="passMessage" class="message"></p>
</div>

<div class="input-box">
<p>비밀번호 확인</p>
<input type="password" id="passchInput">
<p id="passchMessage" class="message"></p>
</div>

<button type="submit" class="btn">가입하기</button>

<div id="successModal" class="modal">
<div class="modal-content">
<h4>가입 성공!</h4>
<h5>UMC 챌린저 가입을 축하합니다!!!</h5>
<span class="close">닫기</span>
</div>
</div>

</form>

</div>
<script src="validation.js"></script>

</body>
</html>
166 changes: 166 additions & 0 deletions validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
// 가입하기 버튼을 누를 때 실행되는 함수
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();

// 이름 입력란 가져오기
var nameInput = document.getElementById("nameInput");
// 이름 입력란 아래에 메시지를 표시할 요소 가져오기
var nameMessage = document.getElementById("nameMessage");
var NameValid = false;
// 이름 입력란이 비어 있는지 확인
if (nameInput.value.trim() === "") {
// 비어 있다면 빨간색으로 메시지 표시
nameMessage.style.color = "red";
nameMessage.innerText = "필수 입력 항목입니다!";
} else {
// 비어 있지 않다면 초록색으로 메시지 표시
nameMessage.style.color = "green";
nameMessage.innerText = "멋진 이름이에요!";
NameValid = true;
}

///////////////////////////////////////////////////////////////////////

//이메일 입력란 가져오기
var emailInput = document.getElementById("emailInput");
//이메일 입력란 아래에 메시지를 표기할 요소 가져오기
var emailMessage = document.getElementById("emailMessage");
var emailValid = false;
// 이메일 입력란이 비어 있는지 확인
if (emailInput.value.trim() === "") {
// 비어 있다면 빨간색으로 메시지 표시
emailMessage.style.color = "red";
emailMessage.innerText = "올바른 이메일 형식이 아닙니다!";
} else {
// 비어 있지 않다면 초록색으로 메시지 표시
emailMessage.style.color = "green";
emailMessage.innerText = "올바른 이메일 형식입니다!";
emailValid = true;
}

///////////////////////////////////////////////////////////////////////

//나이 입력란 가져오기
var ageInput = document.getElementById("ageInput");
//나이 입력란 아래에 메시지를 표기할 요소 가져오기
var ageMessage = document.getElementById("ageMessage");
var ageValid = false;
// 나이는 숫자만 입력가능 -> 문자열 입력시 나이는 숫자 형식이어야 합니다! 출력
if (isNaN(ageInput.value)) { //isNaN : 값이 숫자인지 확인한다.
ageMessage.style.color = "red";
ageMessage.innerText = "나이는 숫자 형식이어야 합니다!";
//return;
}
// 나이는 양수만 가능 -> 나이는 음수가 될 수 없습니다! 출력
else if(ageInput.value < 0){
ageMessage.style.color = "red";
ageMessage.innerText = "나이는 음수가 될 수 없습니다!";
//return;
}
// 나이가 소수일 때 -> 나이는 소수가 될 수 없습니다! 출력
else if (Number.isInteger(parseFloat(ageInput.value)) === false) {
ageMessage.style.color = "red";
ageMessage.innerText = "나이는 소수가 될 수 없습니다!";
//return;
}
// 19살 이상만 가입 가능 -> 미성년자는 가입할 수 없습니다! 출력
else if(ageInput.value < 19 ){
ageMessage.style.color = "red";
ageMessage.innerText = "미성년자는 가입할 수 없습니다!";
//return;
}


// 나이 입력란이 비어 있는지 확인
else if (ageInput.value.trim() === "") {
// 비어 있다면 빨간색으로 메시지 표시
ageMessage.style.color = "red";
ageMessage.innerText = "나이를 입력해주세요!";
} else {
// 비어 있지 않다면 초록색으로 메시지 표시
ageMessage.style.color = "green";
ageMessage.innerText = "올바른 나이 형식입니다!";
ageValid = true;
}


///////////////////////////////////////////////////////////////////////

//비밀번호 입력란 가져오기
var passInput = document.getElementById("passInput");
//비밀번호 입력란 아래에 메시지를 표기할 요소 가져오기
var passMessage = document.getElementById("passMessage");
// 특수문자 정의
var passwordCharset = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()]).{4,12}$/;
var passVaild = false;
// 최소 4자리 이상 -> 비밀번호는 최소 4자리 이상이어야 합니다. 출력
if(passInput.value.length < 4 ){
passMessage.style.color = "red";
passMessage.innerText = "비밀번호는 최소 4자리 이상이어야 합니다.";

}
// 최소 12자리까지 가능 -> 비밀번호는 최대 12자리까지 가능합니다. 출력
else if(passInput.value.length > 12 ){
passMessage.style.color = "red";
passMessage.innerText = " 비밀번호는 최대 12자리까지 가능합니다.";

}
// 영어, 숫자, 특수 문자를 모두 조합해서 작성 -> 영어, 숫자, 특수 문자를 조합해야 합니다. 출력
else if (!passwordCharset.test(passInput.value)) {
passMessage.style.color = "red";
passMessage.innerText = "비밀번호는 영어, 숫자, 특수 문자를 조합해야 합니다.";

}
// 비밀번호 입력란이 비어 있는지 확인
else if (passInput.value.trim() === "") {
// 비어 있다면 빨간색으로 메시지 표시
passMessage.style.color = "red";
passMessage.innerText = "비밀번호를 입력해주세요";

}
else {
// 비어 있지 않다면 초록색으로 메시지 표시
passMessage.style.color = "green";
passMessage.innerText = "올바른 비밀번호입니다!";
passVaild = true;
//return;
}

//비밀번호 확인 입력란 가져오기
var passchInput = document.getElementById("passchInput");
//비밀번호 확인 입력란 아래에 메시지를 표기할 요소 가져오기
var passchMessage = document.getElementById("passchMessage");
var passchVaild = false;
// 비밀번호 확인 입력란이 비어 있는지 확인
if (passchInput.value.trim() === "") {
// 비밀번호가 일치하지 않다면 빨간색으로 메시지 표시
passchMessage.style.color = "red";
passchMessage.innerText = "비밀번호를 확인해주세요";
} else {
// 비밀번호와 일치하다면 초록색으로 메시지 표시
if(passInput.value === passchInput.value){
passchMessage.style.color = "green";
passchMessage.innerText = "비밀번호가 일치합니다!";
passchVaild = true;
} else {
// 비밀번호가 일치하지 않다면 빨간색으로 메시지 표시
passchMessage.style.color = "red";
passchMessage.innerText = "비밀번호가 일치하지 않습니다";
}
}


var allConditionsMet = NameValid,ageValid,passVaild,passchVaild,emailValid;
if (allConditionsMet) {
var successModal = document.getElementById("successModal");
successModal.style.display = "block";

//닫기 버튼
var closeModal = document.getElementsByClassName("close")[0];
closeModal.onclick = function() {
successModal.style.display = "none";
}
}
});