본문 바로가기
Web

회원가입 페이지 만들기

betago 2019. 6. 18. 11:00

HTML

========================================================================================

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script src="https://code.jquery.com/jquery-3.4.1.js"

integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="

crossorigin="anonymous"></script>

<link rel="stylesheet" href="Test_Css.css" />

<body>

<form>

<table>

<tr>

<td colspan=2 class="title">회원 기본 정보</td>

</tr>

<tr class = "first">

<td class="list">*아이디 :</td>

<td class = "data"><input type="text" id="id" value="" /> 4~12자의 영문 대소문자와 숫자로만

입력</td>

</tr>

<tr>

<td class="list">*비밀번호 :</td>

<td class = "data"><input type="password" id="pw1" value="" /> 4~12자의 영문 대소문자와

숫자로만 입력</td>

</tr>

<tr>

<td class="list">*비밀번호 확인 :</td>

<td class = "data"><input type="password" id="pw2" value="" /></td>

</tr>

<tr class ="last">

<td class="list">*메일주소 :</td>

<td class = "data"><input type="text" id="email" value="" /> 예) id@naver.com</td>

</tr>

<tr>

<td colspan=2 class="title">개인 신상 정보</td>

</tr>

<tr class = "first">

<td class="list">*주민등록번호 :</td>

<td><input type="text" id="RRN" value=""> 예)

123456-1234567</td>

</tr>

<tr>

<td class="lit">*생일 :</td>

<td class = "data"><select id="year"></select>년 <select id="month">

<option value=1>01</option>

<option value=2>02</option>

<option value=3>03</option>

<option value=4>04</option>

<option value=5>05</option>

<option value=6>06</option>

<option value=7>07</option>

<option value=8>08</option>

<option value=9>09</option>

<option value=10>10</option>

<option value=11>11</option>

<option value=12>12</option>

</select>월 <select id="day"></select>일</td>

</tr>

<tr>

<td class="lit">관심분야 :</td>

<td class = "data"><input type="checkbox" name="interest" value="컴퓨터">컴퓨터&nbsp;

<input type="checkbox" name="interest" value="인터넷">인터넷&nbsp;

<input type="checkbox" name="interest" value="여행">여행&nbsp;

<input type="checkbox" name="interest" value="영화감상">영화감상&nbsp;

<input type="checkbox" name="interest" value="음악">음악&nbsp;</td>

</tr>

<tr class ="last">

<td class="lit">자기소개 :</td>

<td class = "data"><textarea></textarea></td>

</tr>

</table>

<div>

<input type="submit" value="회원가입">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="다시입력">

</div>

</form>

</body>

<script src="Test_JS.js"></script>

</html>

========================================================================================

CSS

=========================================================================================

@charset "UTF-8";

 

.title {

text-align : center;

background-color : #33cc33;

font-size : 30px;

font-weight : 900;

font-family : "궁서";

color : white;

height : 50px;

border-bottom : 20px solid #FFFFFF;

border-top : 60px solid #FFFFFF;

padding : 10px 0px;

}

 

table {

width : 580px;

margin : auto;

}

 

/* 테이블 간격조정 */

td:not(.title) {

border-bottom : 6px solid #FFFFFF;

border-top : 6px solid #FFFFFF;

}

 

.list {

width : 20%;

font-size : 15px;

}

 

.data {

width : 80%;

font-size : 15px;

}

 

div {

text-align : center;

margin : 50px 0px;

}

 

#idE {

font-size : 10px;

color : red;

border : 0;

}

 

#pw1E {

font-size : 10px;

color : red;

border : 0;

}

 

#pw2E {

font-size : 10px;

color : red;

border : 0;

}

 

#emE {

font-size : 10px;

color : red;

border : 0;

}

 

#rrnE {

font-size : 10px;

color : red;

border : 0;

}

 

#ymdE {

font-size : 10px;

color : red;

border : 0;

}

 

textarea{

width : 95%;

margin : auto 0;

height : 70px;

}

 

input[type=submit]{

width : 150px;

height : 50px;

font-size : 20px;

font-weight : 900;

font-family : "궁서";

border : 0;

color : #000000;

background-color : #a6ff4d;

}

 

input[type=reset]{

width : 150px;

height : 50px;

font-size : 20px;

font-weight : 900;

font-family : "궁서";

border : 0;

color : #000000;

background-color : #a6ff4d;

}

=======================================================================================

JavaScript

=======================================================================================

var id_stat = false;

var pw1_stat = false;

var pw2_stat = false;

var email_stat = false;

var rrn_stat = false;

var ymd_stat = false;

 

/* 새로운 객체를 생성하는 함수 */

function cE(id, text){

var item = document.createElement("tr");

item.id = id;

item.append(document.createElement("td"));

var a = document.createElement("td")

a.innerText = text;

item.append(a);

return item;

}

 

/* 아이디의 유효성 검사 -> 아이디에서 벗어 났을대 출력 */

$("#id").focusout(function() {

var id = $("#id").val();

if (id.match("^[a-zA-Z0-9]{4,12}$") == null) {

id_stat = false;

if ($("#idE").length != 0) {

return;

}

 

$("#id").parents("tr").after(cE("idE","아이디가 잘못되었습니다."));

} else {

id_stat = true;

$("#idE").closest("tr").remove();

}

});

 

/* 비밀번호 유효성 검사 */

$("#pw1").focusout(function() {

var pw1 = $("#pw1").val();

var id = $("#id").val();

 

if (pw1.match("^[a-zA-Z0-9]{4,12}$") == null || pw1 == id) {

pw1_stat = false;

if ($("#pw1E").length != 0) {

return

}

$("#pw1").parents("tr").after(cE("pw1E","비밀번호가 아이디와 같거나 잘못되었습니다."));

}else{

pw1_stat = true;

$("#pw1E").closest("tr").remove();

}

});

 

/* 비밀번호 확인 */

$("#pw2").focusout(function() {

var pw1 = $("#pw1").val();

var pw2 = $("#pw2").val();

 

if (pw1 != pw2) {

pw2_stat = false;

if ($("#pw2E").length != 0) {

return

}

$("#pw2").parents("tr").after(cE("pw2E","비밀번호가 일치하지 않습니다."));

}else{

pw2_stat = true;

$("#pw2E").closest("tr").remove();

}

});

 

/* 메일주소 확인 */

$("#email").focusout(function() {

var email = $("#email").val();

 

if (email.match("^[a-z|0-9|A-Z]+@[a-z]+.[a-z]+$") == null) {

email_stat = false;

if ($("#emE").length != 0) {

return

}

 

$("#email").parents("tr").after(cE("emE","이메일이 잘못되었습니다."));

}else{

email_stat = true;

$("#emE").closest("tr").remove();

}

});

 

/* 주민등록번호 */

$("#RRN").focusout(function() {

var rrn = $("#RRN").val();

if(rrn.match("^[0-9]{6}-[0-9]{7}$") == null){

rrn_stat = false;

if($("#rrnE").length != 0){

return;

}

 

$("#RRN").parents("tr").after(cE("rrnE","주민등록번호가 잘못되었습니다."));

}else{

rrn = rrn.replace("-","");

var arr = new Array();

for(var i = 0; i < rrn.length; i++){

arr[i] = parseInt(rrn.charAt(i));

}

 

var j = 2;

var key = 0;

for(var i = 0; i < 12; i++){

if(j >= 10){

j = 2;

}

 

key += j*arr[i];

 

j++

}

 

key = 11-key%11;

 

if(key != arr[12]){

rrn_stat = false;

$("#rrnE").closest("tr").remove();

$("#RRN").parents("tr").after(cE("rrnE","올바른 주민등록번호가 아닙니다."));

}else{

rrn_stat = true;

$("#rrnE").closest("tr").remove();

}

 

}

 

});

 

/* 달력 만들기*/

$("#month").change(function(){

Day()

})

 

$("#year").change(function(){

var m = $("#month");

m.val(1);

Day();

})

 

/* 시작과 동시에 생성 */

$("document").ready(function(){

Year();

Day();

})

 

/* 일을 만드는 함수 */

function Day(){

var m = parseInt($("#month option:selected").val());

var y = parseInt($("#year option:selected").val());

var d = $("#day");

var lastDay = new Date(y,m,0).getDate();

$("#day option").closest("option").remove();

 

for(var i = 1; i <= parseInt(lastDay); i++){

d.append(createDay(i));

}

}

 

/*일을 입력받으면 option객체를 생성 */

function createDay(a){

var d = document.createElement("option");

d.value = a;

if(a < 10){

d.innerText = "0"+a;

}else{

d.innerText = a;

}

 

return d;

}

 

/* 년도를 만드는 함수 */

function Year(){

var y = $("#year");

var today = new Date().getFullYear();

 

for(var i = today-99; i <= today; i++){

y.append(createYear(i));

}

}

 

 

/* 년도를 입력받으면 option객체를 생성한다. */

function createYear(a){

var y = document.createElement("option");

y.value = a;

y.innerText = a;

return y;

}

 

/* 생년월일 확인하기 */

$("#year").parent().focusout(function(){

var rrn = $("#RRN").val();

var y1 = parseInt(rrn.substr(0,2)); // 주민등록년도

var m1 = parseInt(rrn.substr(2,2)); // 주민등록월

var d1 = parseInt(rrn.substr(4,2)); // 주민등록일

 

var y2 = parseInt($("#year").val().substr(2,2));

var m2 = parseInt($("#month").val());

var d2 = parseInt($("#day").val());

 

var t = (y1 == y2 && m1 == m2 && d1 == d2);

if(!t){

ymd_stat = false;

if($("#ymdE").length != 0){

return;

}

$(this).parents("tr").after(cE("ymdE","생년월일이 일치하지 않습니다."));

}else{

ymd_stat = true;

$("#ymdE").closest("tr").remove();

}

 

});

 

/* submit 제어 */

$("form").submit(function(){

var all = id_stat && pw1_stat && pw2_stat && email_stat && rrn_stat && ymd_stat;

 

if(!all){

alert("필수입력란(*)을 모두 작성해 주세요.");

}

 

return all;

})

 

/* reset 제어 */

$("input[type = reset]").click(function(){

$("#ymdE").closest("tr").remove();

$("#rrnE").closest("tr").remove();

$("#emE").closest("tr").remove();

$("#pw2E").closest("tr").remove();

$("#pw1E").closest("tr").remove();

$("#idE").closest("tr").remove();

});

'Web' 카테고리의 다른 글

Mini Project  (0) 2019.07.22
HTML,JavaScript로 단순한 계산기 만들기  (0) 2019.06.14

'Web' Related Articles

티스토리툴바