[HTML/CSS/JavaScript] 회원가입 폼 + 정규식

sign.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
    <title>회원가입</title>
    <link rel="stylesheet" href="./sign_up.css">
    <script src="./sign_up.js"></script>
</head>
<body>
	<div>
    	<div><h1>회원가입</h1></div>
        <p id="first_text">· 온라인 회원가입 작성</p>
        <hr>
        <p id="second_text">· 고객님의 정보는 개인정보보호정책에 의해 철저하게 보호됩니다.</p>
        <hr>
        <br>
        <form action="aaa.php" method="post">
        	<table>
            	<tr>
                	<th>사용자 ID</th>
                    <td><input type="text" name="id" id="id">
                    <input type="button" value="ID 확인" onclick="checkId()"></td>
                </tr>
					<tr>
                    <th>비밀번호</th>
                    <td><input type="password" name="pass" id="pass">
                    4~12자리의 영문,숫자,특수문자(!, @, $, %, ^,&,*)만 가능
                    </td>
                    </tr>
                    <tr>
                    <th>비밀번호 확인</th>
                    <td colspan="2"><input type="password" name="pass2" id="pass2"></td>
                    </tr>
                    <tr>
                    <th>성명</th>
                    <td><input type="text" name="name" id="name">
                    · 띄어쓰기 없이 입력, 반드시 실명이어야 합니다!
                    </td>
                    </tr>
					<tr>
						<th rowspan="3">E-mail</th>
						<td><input type="text" name="email" id="email">
							<input type="checkbox" id="mailRecive"> <h4 class="bold_text">메일 수신여부</h4>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							·
							<h4 class="bold_text">할인 이벤트 정보</h4>
							및, 할인쿠폰, 관심분야 들 꼭 필요한 정보를 빠르게 받아보실 수 있습니다.
						</td>
					</tr>
					<tr>
						<td colspan="2">
							· 비밀번호 분실시 E-mail로 확인해 드리니,
							<h4 id="color_text">정확한 E-mail주소를 기입</h4>
							해주세요.
						</td>
					</tr>
					<tr>
						<th>우편 번호</th>
						<td><input type="text" name="first_addr" id="first_addr">
							-
							<input type="text" name="second_addr" id="second_addr">
							<input type="button" value="우편번호 검색">
						</td>
					</tr>

					<tr>
						<th rowspan="2">주소</th>
						<td colspan="2"><input type="text" name="addr1" id="addr1" class="addr"></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="text" name="addr2" id="addr2" class="addr"></td>
					</tr>

					<tr>
						<th>휴대폰번호</th>
						<td colspan="2"><input type="text" id="phone1" class="phone">
							-
							<input type="text" id="phone2" class="phone">
							-
							<input type="text" id="phone3" class="phone"></td>
					</tr>
				</table>
				<br>
				<div>
					<input type="button" value="회원가입" onclick="allCheck()"></a>
				</div>
			</form>
			<br>
			<br>
		</div>
	</body>
</html>

style.css

body > div {
    width: 55em;
    text-align: left;
    }

#second_text {
    margin: 30px 0;
}
table td {
    height: 60px;
    width: 700px;
    border-bottom: 1px solid gray;
}
th {
    width: 170px;
    text-align: start;
    background-color: rgb(230, 230, 230);
    border-bottom: 1px solid gray;
    color: rgb(92, 91, 91);
}
#first_text {
    font-size: x-large;
    font-weight: bolder;
}
th::after {
    content: " *";
    color: red;
}
.bold_text {
    display: inline;
}
#color_text {
    display: inline;
    color: royalblue;
}
.addr {
    width: 500px;
}
.phone {
    width: 70px;
}
div {
    width: auto;
    text-align: center;
}
input[type=text] {
    height: 23px;
    border: 1px solid rgb(173, 173, 173);
}

sign_up.js

var checkedId = '';
var checkedName = '';
var checkedEmail = '';
var checkedAddr = '';
var checkedPhoneNumber = '';

window.onload = function () {
    idText = document.getElementById('id');
    passText = document.getElementById('pass');
    pass2Text = document.getElementById('pass2');
    pass2Text = document.getElementById('pass2');
    nameText = document.getElementById('name');
    emailText = document.getElementById('email');
    mailReciveBox = document.getElementById('mailRecive');
    phone1Text = document.getElementById('phone1');
    phone2Text = document.getElementById('phone2');
    phone3Text = document.getElementById('phone3');
}

function checkId() {
    var id = idText.value;
    var idReg = /^[a-z]+[a-z0-9]{5,19}$/;
    if (!idReg.test(id)) {
        alert("아이디는 영문자로 시작하는 6~20자 영문자 또는 숫자이어야 합니다.");
        checkedId = '';
    } else {
        alert(id + "(은)는 사용 할 수 있는 아이디 입니다.");
        checkedId = id;

    }

}

function checkPass() {
    var pass = passText.value;
    var pass2 = pass2Text.value;
    var passReg = /^.*(?=^.{4,12}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@$%^&*]).*$/;
    if (!passReg.test(pass)) {
        alert(" 비밀번호는 4~12자리의 영문,숫자, 최소 한개의 특수문자(!, @, $, %, ^,&,*)로 구성해야합니다.");
        // checkedPass = '';
        return false;
    } else {
        if (pass === pass2) {
            // checkedPass = pass;
            return true;
        } else {
            alert('비밀번호가 일치하지 않습니다.');
        }
    }
}

function checkName() {
    var name = nameText.value;
    var nameReg = /^[가-힣]{2,4}$/;
    if (!nameReg.test(name)) {
        alert("올바른 성명을 입력하세요.");
        checkedName = '';
        return false;
    } else {
        checkedName = name;
        return true;
    }
}

function checkEmail() {
    var email = emailText.value;
    var emailReg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/;
    if (!emailReg.test(email)) {
        alert("올바른 E-mail주소를 입력하세요.");
        checkedEmail = '';
        return false;
    } else {
        checkedEmail = email;
        return true;
    }
}

function checkPhone() {
    var phone = phone1Text.value + '-' + phone2Text.value + '-' + phone3Text.value;
    var phoneReg = /^\d{3}-\d{3,4}-\d{4}$/;
    if (!phoneReg.test(phone)) {
        alert("올바른 휴대폰번호를 입력하세요.");
        checkedPhoneNumber = '';
        return false;
    } else {
        checkedPhoneNumber = phone;
        return true;
    }
}

// function checkAddr() {
//     var addr = phone1Text.value + '-' + phone2Text.value + '-' + phone3Text.value;
//     var addrReg = /^\d{3}-\d{3,4}-\d{4}$/;
//     if (!addrReg.test(addr)) {
//         alert("올바른 우편번호를 입력하세요.");
//         checkedAddr = '';
//         return false;
//     } else {
//         checkedAddr = addr;
//         return true;
//     }
// }

function allCheck() {
    var checked;
    if (!checkedId) {
        alert('아이디 확인을 해주세요.');
        return;
    }
    if (!checkPass()) return;
    if (!checkName()) return;
    if (!checkEmail()) return;
    if (!checkPhone()) return;
    if (mailReciveBox.checked) checked = '동의';
    else checked = '거부';

    alert(
        '가입 정보\n\n' +
        '아이디 : ' + checkedId +
        '\n성명 : ' + checkedName +
        '\n이메일 : ' + checkedEmail +
        '\n이메일 수신 여부: ' + checked +
        '\n휴대폰번호 : ' + checkedPhoneNumber
    );
}

저작자표시

'WEB' 카테고리의 다른 글

[HTTP:웹 기본 지식] 인터넷 통신 (0)	2021.02.19
[JavaScript/PHP] Ajax로 PHP에서 배열받아오기 (0)	2020.09.10

코딩하는 아링이

[HTML/CSS/JavaScript] 회원가입 폼 + 정규식

'WEB' 카테고리의 다른 글

티스토리툴바

[HTML/CSS/JavaScript] 회원가입 폼 + 정규식

'WEB' 카테고리의 다른 글

관련글

티스토리툴바