From 600d331928583128156be53da58f40677cce543b Mon Sep 17 00:00:00 2001 From: kimtaeyeon04 <134378550+kimtaeyeon04@users.noreply.github.com> Date: Sat, 6 Apr 2024 14:08:11 +0900 Subject: [PATCH] Add files via upload --- validation.css | 131 ++++++++++++++++++++++++++++++++++++++ validation.html | 61 ++++++++++++++++++ validation.js | 166 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 358 insertions(+) create mode 100644 validation.css create mode 100644 validation.html create mode 100644 validation.js diff --git a/validation.css b/validation.css new file mode 100644 index 0000000..041a6a6 --- /dev/null +++ b/validation.css @@ -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; + +} \ No newline at end of file diff --git a/validation.html b/validation.html new file mode 100644 index 0000000..f52edc7 --- /dev/null +++ b/validation.html @@ -0,0 +1,61 @@ + + + + + + + validation + + +
+
+

회원가입

+
+ +
+

이름

+ +

+
+ +
+

이메일

+ +

+
+ +
+

나이

+ +

+
+ +
+

비밀번호

+ +

+
+ +
+

비밀번호 확인

+ +

+
+ + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/validation.js b/validation.js new file mode 100644 index 0000000..78b875e --- /dev/null +++ b/validation.js @@ -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"; + } + } +}); + +