반응형
자바스크립트를 활용한 회원가입 유효성 검사와 CSS 스타일링
1. 신버전: 회원가입 폼 구성 요소, CSS 스타일링, 유효성 검사, 커스텀 알림 창 구현
코드
더보기
signup.html
0.01MB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
/* 페이지 전체 스타일 */
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
/* 컨테이너 스타일 */
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
/* 제목 스타일 */
h1 {
margin-bottom: 20px;
color: #333;
font-size: 24px;
text-align: center;
}
/* 입력 필드 및 선택 박스 스타일 */
input,
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
/* 성별 및 국적 선택 영역 스타일 */
.selection-container {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
/* 성별 및 국적 옵션 스타일 */
.gender-options,
.nationality-options {
display: flex;
justify-content: space-around;
width: 48%;
}
/* 성별 및 국적 라벨 스타일 */
.gender-options label,
.nationality-options label {
flex: 1;
text-align: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-right: 5px;
cursor: pointer;
}
/* 마지막 라벨의 오른쪽 여백 제거 */
.gender-options label:last-child,
.nationality-options label:last-child {
margin-right: 0;
}
/* 라디오 버튼 숨기기 */
.gender-options input,
.nationality-options input {
display: none;
}
/* 선택된 옵션의 스타일 */
.gender-options input:checked+label,
.nationality-options input:checked+label {
border-color: #28a745;
color: #28a745;
}
/* 버튼 스타일 */
button {
width: 100%;
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 버튼 호버 스타일 */
button:hover {
background-color: #218838;
}
/* 오류가 있는 입력 필드 스타일 */
input.error,
select.error,
.gender-options.error,
.nationality-options.error {
border-color: #ff0000;
border-width: 2px;
}
/* 커스텀 알림 스타일 */
.alert {
background: #fff;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 300px;
width: 100%;
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.alert.show {
display: block;
}
.alert button {
margin-top: 20px;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.alert button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container">
<h1>회원가입</h1>
<form id="signupForm">
<input type="text" id="username" name="username" placeholder="아이디" required>
<input type="password" id="password" name="password" placeholder="비밀번호" required>
<input type="email" id="email" name="email" placeholder="이메일">
<input type="text" id="name" name="name" placeholder="이름" required>
<input type="text" id="dob" name="dob" placeholder="생년월일 (8자리)" maxlength="8" required>
<select id="carrier" name="carrier" required>
<option value="">통신사 선택</option>
<option value="sk">SKT</option>
<option value="kt">KT</option>
<option value="lg">LG U+</option>
</select>
<!-- 성별 및 국적 선택 영역 -->
<div class="selection-container">
<div class="gender-options">
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label>
</div>
<div class="nationality-options">
<input type="radio" id="korean" name="nationality" value="korean" required checked>
<label for="korean">내국인</label>
<input type="radio" id="foreigner" name="nationality" value="foreigner">
<label for="foreigner">외국인</label>
</div>
</div>
<input type="tel" id="phone" name="phone" placeholder="핸드폰번호" required>
<button type="submit">가입하기</button>
</form>
</div>
<!-- 커스텀 알림 -->
<div id="alertBox" class="alert">
<p id="alertMessage"></p>
<button onclick="closeAlert()">확인</button>
</div>
<script>
// 유효성 검사 및 폼 제출 처리
document.getElementById('signupForm').addEventListener('submit', function (event) {
event.preventDefault();
let isValid = true;
const fields = ['username', 'password', 'name', 'dob', 'carrier', 'phone'];
const emailField = document.getElementById('email');
const regexes = {
email: /^\S+@\S+\.\S+$/, // 이메일 정규식
dob: /^\d{8}$/, // 생년월일 정규식
phone: /^01\d{8,9}$/ // 핸드폰 번호 정규식
};
// 생년월일 유효성 검사 함수
function validateDOB(dob) {
if (!regexes.dob.test(dob)) return false;
const year = parseInt(dob.substring(0, 4), 10);
const month = parseInt(dob.substring(4, 6), 10);
const day = parseInt(dob.substring(6, 8), 10);
if (month < 1 || month > 12) return false;
if (day < 1 || day > 31) return false;
return true;
}
// 각 필드 유효성 검사
fields.forEach(field => {
const input = document.getElementById(field);
input.classList.remove('error');
if (!input.value.trim() || (regexes[field] && !regexes[field].test(input.value.trim()))) {
input.classList.add('error');
isValid = false;
}
if (field === 'dob' && !validateDOB(input.value.trim())) {
input.classList.add('error');
isValid = false;
}
});
// 이메일 필드가 비어있지 않은 경우 유효성 검사
if (emailField.value.trim() && !regexes.email.test(emailField.value.trim())) {
emailField.classList.add('error');
isValid = false;
} else {
emailField.classList.remove('error');
}
// 성별 및 국적 유효성 검사
const gender = document.querySelector('input[name="gender"]:checked');
const nationality = document.querySelector('input[name="nationality"]:checked');
if (!gender) {
document.querySelector('.gender-options').classList.add('error');
isValid = false;
} else {
document.querySelector('.gender-options').classList.remove('error');
}
if (!nationality) {
document.querySelector('.nationality-options').classList.add('error');
isValid = false;
} else {
document.querySelector('.nationality-options').classList.remove('error');
}
// 유효성 검사 통과 시 커스텀 알림 표시
if (isValid) {
showAlert('회원가입이 완료되었습니다!');
// 서버로 데이터 전송 로직 추가 가능
} else {
showAlert('입력된 정보를 다시 확인해주세요.');
}
});
// 생년월일 입력 필드 숫자만 입력 가능하도록 처리
document.getElementById('dob').addEventListener('input', function (e) {
this.value = this.value.replace(/[^0-9]/g, '');
});
// 핸드폰 번호 입력 필드 숫자만 입력 가능하도록 처리
document.getElementById('phone').addEventListener('input', function (e) {
this.value = this.value.replace(/[^0-9]/g, '');
});
// 커스텀 알림 표시 함수
function showAlert(message) {
const alertBox = document.getElementById('alertBox');
const alertMessage = document.getElementById('alertMessage');
alertMessage.textContent = message;
alertBox.classList.add('show');
}
// 커스텀 알림 닫기 함수
function closeAlert() {
const alertBox = document.getElementById('alertBox');
alertBox.classList.remove('show');
}
</script>
</body>
</html>코드: CSS 설명
더보기
- body: 전체 페이지의 스타일을 설정합니다. 중앙 정렬과 배경색을 적용합니다.
- .container: 폼을 감싸는 컨테이너 스타일입니다. 배경색, 패딩, 테두리 반경 및 그림자 효과를 적용합니다.
- h1: 폼 제목의 스타일을 설정합니다. 글자 크기와 색상, 정렬을 지정합니다.
- input, select: 입력 필드와 선택 박스의 스타일을 설정합니다. 너비, 패딩, 테두리 등을 설정합니다.
- .selection-container: 성별과 국적 선택 영역의 스타일을 설정합니다. flexbox를 사용해 공간을 균등하게 분배합니다.
- .gender-options, .nationality-options: 성별과 국적 선택 옵션의 스타일을 설정합니다. 라벨의 텍스트 정렬, 테두리, 패딩 등을 지정합니다.
- button: 제출 버튼의 스타일을 설정합니다. 배경색, 글자색, 테두리 반경 등을 설정합니다.
- input.error, select.error, .gender-options.error, .nationality-options.error: 유효성 검사에 실패한 필드의 스타일을 설정합니다. 테두리 색상과 두께를 변경합니다.
- .alert: 커스텀 알림 창의 스타일을 설정합니다. 배경색, 테두리, 패딩, 중앙 정렬 등을 지정합니다.
- .alert.show: 커스텀 알림 창이 보이도록 설정합니다.
- .alert button: 알림 창의 확인 버튼 스타일을 설정합니다. 배경색, 글자색, 패딩 등을 지정합니다.
/* 페이지 전체 스타일 */
body {
font-family: 'Arial', sans-serif; /* 폰트 스타일을 Arial로 설정 */
display: flex; /* flexbox 레이아웃 사용 */
justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 */
background-color: #f0f0f0; /* 배경색 설정 */
margin: 0; /* 여백 제거 */
}
/* 컨테이너 스타일 */
.container {
background: #fff; /* 배경색 설정 */
padding: 20px; /* 내부 여백 설정 */
border-radius: 8px; /* 모서리 둥글게 설정 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
max-width: 400px; /* 최대 너비 설정 */
width: 100%; /* 너비 100% 설정 */
}
/* 제목 스타일 */
h1 {
margin-bottom: 20px; /* 아래 여백 설정 */
color: #333; /* 글자 색상 설정 */
font-size: 24px; /* 글자 크기 설정 */
text-align: center; /* 가운데 정렬 */
}
/* 입력 필드 및 선택 박스 스타일 */
input,
select {
width: 100%; /* 너비 100% 설정 */
padding: 10px; /* 내부 여백 설정 */
margin-bottom: 15px; /* 아래 여백 설정 */
border: 1px solid #ccc; /* 테두리 설정 */
border-radius: 4px; /* 모서리 둥글게 설정 */
font-size: 16px; /* 글자 크기 설정 */
box-sizing: border-box; /* 박스 크기 설정 */
}
/* 성별 및 국적 선택 영역 스타일 */
.selection-container {
display: flex; /* flexbox 레이아웃 사용 */
justify-content: space-between; /* 공간을 균등하게 분배 */
margin-bottom: 15px; /* 아래 여백 설정 */
}
/* 성별 및 국적 옵션 스타일 */
.gender-options,
.nationality-options {
display: flex; /* flexbox 레이아웃 사용 */
justify-content: space-around; /* 공간을 균등하게 분배 */
width: 48%; /* 너비 48% 설정 */
}
/* 성별 및 국적 라벨 스타일 */
.gender-options label,
.nationality-options label {
flex: 1; /* flexbox 항목 확장 */
text-align: center; /* 가운데 정렬 */
border: 1px solid #ccc; /* 테두리 설정 */
border-radius: 4px; /* 모서리 둥글게 설정 */
padding: 10px; /* 내부 여백 설정 */
margin-right: 5px; /* 오른쪽 여백 설정 */
cursor: pointer; /* 커서 모양 변경 */
}
/* 마지막 라벨의 오른쪽 여백 제거 */
.gender-options label:last-child,
.nationality-options label:last-child {
margin-right: 0; /* 오른쪽 여백 제거 */
}
/* 라디오 버튼 숨기기 */
.gender-options input,
.nationality-options input {
display: none; /* 라디오 버튼 숨기기 */
}
/* 선택된 옵션의 스타일 */
.gender-options input:checked+label,
.nationality-options input:checked+label {
border-color: #28a745; /* 선택된 항목의 테두리 색상 */
color: #28a745; /* 선택된 항목의 글자 색상 */
}
/* 버튼 스타일 */
button {
width: 100%; /* 너비 100% 설정 */
padding: 12px; /* 내부 여백 설정 */
background-color: #28a745; /* 배경색 설정 */
color: white; /* 글자 색상 설정 */
border: none; /* 테두리 제거 */
border-radius: 4px; /* 모서리 둥글게 설정 */
font-size: 18px; /* 글자 크기 설정 */
cursor: pointer; /* 커서 모양 변경 */
transition: background-color 0.3s ease; /* 배경색 전환 효과 */
}
/* 버튼 호버 스타일 */
button:hover {
background-color: #218838; /* 호버 시 배경색 변경 */
}
/* 오류가 있는 입력 필드 스타일 */
input.error,
select.error,
.gender-options.error,
.nationality-options.error {
border-color: #ff0000; /* 테두리 색상 변경 */
border-width: 2px; /* 테두리 두께 변경 */
}
/* 커스텀 알림 스타일 */
.alert {
background: #fff; /* 배경색 설정 */
border: 1px solid #ccc; /* 테두리 설정 */
padding: 20px; /* 내부 여백 설정 */
border-radius: 8px; /* 모서리 둥글게 설정 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
max-width: 300px; /* 최대 너비 설정 */
width: 100%; /* 너비 100% 설정 */
text-align: center; /* 가운데 정렬 */
position: fixed; /* 위치 고정 */
top: 50%; /* 화면 중앙에 위치 */
left: 50%; /* 화면 중앙에 위치 */
transform: translate(-50%, -50%); /* 중앙 정렬 */
display: none; /* 초기에는 보이지 않음 */
}
/* 커스텀 알림 표시 */
.alert.show {
display: block; /* 보이도록 설정 */
}
/* 알림 버튼 스타일 */
.alert button {
margin-top: 20px; /* 위쪽 여백 설정 */
padding: 10px 20px; /* 내부 여백 설정 */
background-color: #28a745; /* 배경색 설정 */
color: white; /* 글자 색상 설정 */
border: none; /* 테두리 제거 */
border-radius: 4px; /* 모서리 둥글게 설정 */
font-size: 16px; /* 글자 크기 설정 */
cursor: pointer; /* 커서 모양 변경 */
}
/* 알림 버튼 호버 스타일 */
.alert button:hover {
background-color: #218838; /* 호버 시 배경색 변경 */
}결과
2. 구버전: 회원가입 폼 구성 요소, CSS 스타일링, 유효성 검사
코드
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Register Validate</title>
<script language="javascript">
function validate() {
var checkIP = /^[a-zA-Z0-9]{4,12}$/; //ID와 PASSWORD 유효성 검사 정규식
var checkEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/; //Email 유효성 검사 정규식
var checkPN =/^[0-9]{13}$/;
var userID = document.getElementById("userID"); //ID
var userPass = document.getElementById("userPass"); //PASSWORD
var userPassC = document.getElementById("userPassC"); //PASSWORD CHECKING
var userEmail = document.getElementById("userEmail"); //EMAIL
var name = document.getElementById("name"); //NAME
var personalN = document.getElementById("personalN"); //PERSONAL NUMBER
var arrayPN = new Array();//주민 담는 배열
//ID 유효성검사
if(userID.value==''){
alert("Input ID");
return false;
}
if(!checkIP.test(userID.value)) {
alert("Input between 4~12word by using Alphabet and Number");
return false;
}
//PASSWORD 유효성검사
if(userPass.value==''){
alert("Input Password");
return false;
}
if(!checkIP.test(userPass.value)){
alert("Input between 4~12word by using Alphabet and Number");
return false;
}
if(userPass.value!=userPassC.value){
alert("Wrong: The Password and Password_Check are not same, Try again");
return false;
}
//EMAIL 유효성검사
if(userEmail.value==''){
alert("Input Email");
return false;
}
if(!checkEmail.test(userEmail.value)){
alert("Wrong: Input email, try again");
return false;
}
//name 유효성검사
if(name.value==''){
alert("Input Name");
}
//PERSONAL NUMBER 유효성 검사
if(personalN.value==''){
alert("Input Personal No");
return false;
}
var personal = checkPN.exec(personalN.value);
if(personal){// 숫자만 들어왔을때 true로 돌아감
var personalN = document.getElementById("personalN");
for(var i=0; i< personalN.value.length; i++){ // 주민번호 입력한거 배열에 담아주기
arrayPN[i] = personalN.value.charAt(i);
}
var tempSum=0;// 주민번호 유효성 계산해주기
for(var i=0; i<6 ; i++){
tempSum += arrayPN[i] * (2+i);
}
for(var i=0; i<6; i++){
if(i>=2){
tempSum += arrayPN[i+6] * i;
}
else{
tempSum += arrayPN[i+6] * (8+i);
}
}
if((11-(tempSum%11))%10 != arrayPN[12]){
alert("Wrong: It's not correct Personal Number");
arrayPN="";
return false;
}else{
alert("Correct Personal Number");
// 생일에 주민번호 입력한 앞 6자리 넣어주기
var birthYear = document.getElementById("years");
var birthMonth = document.getElementById("month");
var birthDay = document.getElementById("day");
// years 설정
if(arrayPN[0]>2){
years.value = "19"+arrayPN[0]+arrayPN[1];
}else{
years.value = "20"+arrayPN[0]+arrayPN[1];
}
// month 설정
if(arrayPN[2]==0){
month.value = arrayPN[3];
}else{
month.value = arrayPN[2]+arrayPN[3];
}
// day 설정
if(arrayPN[4]==0){
day.value = arrayPN[5];
}else{
day.value = arrayPN[4]+arrayPN[5];
}
return true;
}
}else{
alert("Wrong: Input type");
return false;
}
}
</script>
</head>
<body>
<H3>회원가입</H3>
<form action=mailto:2winkite@naver.com method="post" enctype="text/plain" onsubmit="return validate()">
<table align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor=#F261AA colspan="3" bgcolor="#F261AA" align="center">회원
기본 정보</th>
</tr>
<tr>
<th bgcolor=#F261AA align=center>아이디:</th>
<td><input type="text" name="userID" id="userID" size="37">4~12자의
영문 대소만자와 숫자로만 입력</td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>비밀번호:</th>
<td><input type="password" name="userPass" id="userPass" size="37">4~12자의
영문 대소만자와 숫자로만 입력</td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>비민번호 확인:</th>
<td><input type="password" name="userPassC" id="userPassC" size="37"></td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>메일주소:</th>
<td><input type="text" name="userEmail" id="userEmail" size="37">예)userID@bit.com</td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>이름:</th>
<td><input type="text" name="name" id="name" size="37"></td>
</tr>
<tr>
<th bgcolor=#F261AA colspan="3" bgcolor="#F261AA" align="center">개인
신상 정보</th>
</tr>
<tr>
<th bgcolor=#F261AA align=center>주민등록번호:</th>
<td><input type="text" name="personalN" id="personalN" size="37">예)9604032000000</td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>생일:</th>
<td valign="top" colspan="3">
<select name="years" id="years">
<option value="2000">0000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
</select>년
<select name="month" id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>월
<select name="day" id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>일</td>
</tr>
<tr>
<th bgcolor=#F261AA align=center>관심분야:</th>
<td colspan="2">
<input type="checkbox" name="interating" value="컴퓨터">컴퓨터
<input type="checkbox" name="interating" value="인터넷">인터넷
<input type="checkbox" name="interating" value="여행">여행
<input type="checkbox" name="interating" value="영화감상">영화감상
<input type="checkbox" name="interating" value="음악감상">음악감상
</td>
</tr>
<tr>
<td bgcolor=#F261AA align="center"><B>자기소개:</B></td>
<td>
<textarea name="my_m" cols="60" rows="5"></textarea>
</td>
</tr>
</table>
<div align="center">
<br>
<input type="submit" value="회원 가입">
<input type="reset" value="다시 입력">
</div>
</form>
</body>
</html>
결과
여기까지 읽어주셔서 진심으로 감사드립니다.
이 글이 마음에 드셨다면, 우측 아래 하트(공감)를 눌러 응원의 표시를 부탁드려요.
여러분의 소중한 관심과 사랑이 큰 힘이 됩니다. 감사합니다!
반응형
'개발(Dev) > JavaScript, HTML5, CSS' 카테고리의 다른 글
| [JavaScript]자바스크립트 날짜 계산 방법 총정리: 특정 날짜 차이 계산 (0) | 2024.06.27 |
|---|
