자바스크립트 정규식 회원가입사이트(지도 API 마크 포함)

정규식 회원가입.htm

0.02MB

<!DOCTYPE html>

<html>

<head>

function validate() {

var objID = document.getElementById("my_id");

var objPwd1 = document.getElementById("my_pwd");

var objPwd2 = document.getElementById("my_pwd2");

var objEmail = document.getElementById("my_mail");

var objName = document.getElementById("my_name");

var objaddress = document.getElementById("my_address");

var idfyText = document.getElementById("idfyText");

var arr = new Array(); //주민번호를 담을 배열 // 배열을 하나 만들겠다.

// var idfyText = document.getElementById("identify"); // 주민등록번호 텍스트필드를 가리키는 변수 identify

var anArr = [2,3,4,5,6,7,8,9,2,3,4,5,1]; // 주민등록번호 공식을 쓰기위한 정수형 배열

//var idSum=0; // 정수형의 자료들을 받기위해 0으로 초기화한 변수, 주민등록번호의 합을 넣을 예정

var tempSum = 0; //주민번호 합을 넣는 공간

//아이디와 패스워드가 적합한지 검사할 정규식

var re1 = /^[a-zA-Z0-9]{4,12}$/; //

//[]안에 있는 값만 쓰겠다

//이메일이 적합한지 검사할 정규식

var re2 = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

//이름이 적합한지 검사할 정규식

var re3 = /^[가-힣]{2,}$/; // 자음 모음 마지막 글자 조합이 '힣'

//아이디 입력 하지 않았을 경우

if ((objID.value) == "") {

alert("아이디를 입력하지 않았습니다.");

objID.focus(); //잘못 입력하면 아이디를 바로 입력할 수 있게 해주는 것

return false;

}

//아이디 유효성 검사

//내가 입력한 데이터를 검사하는 check()

//만약 내가 아이디에 정규화 방식을 하나라도 지키지 않으면 if문 안으로 들어가서 alert message를 띄움

if(!check(re1,objID,"아이디는 4~12자의 대소문자와 숫자로만 입력 가능합니다.")) {

objID.value="";

return false; //반환 할 곳 없이 if문 탈출

}

//비밀번호 입력 하지 않았을 경우

if ((objPwd1.value) == ""){

alert("비밀번호를 입력해 주세요");

objPwd1.value="";

return false;

}

//비밀번호 유효성 검사

//만약 내가 비밀번호에 정규화 방식을 하나라도 지키지 않으면 if문 안으로 들어가서 alert message를 띄움

if (!check(re1, objPwd1, "비밀번호는 4~12자의 대소문자와 숫자로만 입력 가능합니다.")) {

return false;

}

if ((objPwd2.value=="")){

alert("비밀번호 확인을 입력해 주세요");

return false;

}

//비밀번호와 비밀번호 확인이 일치 하지 않을 경우

if ((objPwd1.value)!=(objPwd2.value)) {

alert("비밀번호가 일치 하지 않습니다.");

objPwd2.value="";

return false;

}

//이메일 입력 안 했을 경우

if ((objEmail.value)=="") {

alert("이메일을 입력해 주세요");

return false;

}

//이메일이 잘못된 경우

if (!check(re2,objEmail,"이메일을 잘못 입력 했습니다.")) {

objEmail.value="";

return false;

}

//이름 입력 안 한 경우

if ((objName.value)=="") {

alert("이름을 입력해 주세요");

return false;

}

//이름에 특수 문자가 들어간 경우

if (!check(re3,objName,"이름이 잘못 되었습니다.")) {

objName.value="";

return false;

}

for (var i=0; i<idfyText.value.length; i++) { // 인덱스 0번부터 주민등록번호 텍스트필드에 쓴 문자열의 길이를 하나씩 읽어나가겠다.

arr[i] = idfyText.value.charAt(i); // charAt : 문자열의 요소 하나하나씩 보겠다.

}

for (var i=0; i<arr.length-1; i++) { // 인덱스 0번부터 방금 위의 for문에서 만든 배열-1 길이까지 하나씩 읽어나가겠다. (-1의 이유는 주민등록번호 마지막 숫자 전까지의 합과 일련의 식을 이용해 마지막 값과 계산을 해야되기 때문.

tempSum += arr[i] * anArr[i]; // 배열에서 받았던 우리가 입력한 주민등록번호와 주민등록번호 공식을 쓰기위한 배열과 곱해서 모두 더해준다.

}

if((11-(tempSum%11))!=arr[12]) { // 주민등록번호 유효성을 위한 공식 (왜 그런지 알 필요가 없다는 것)

alert("주민번호를 형식에 맞게 쓰세요."); // 알라트 알라트

idfyText.value = ""; // 내용 지우기

idfyText.focus(); // 포커스 온

return false; // 자료들을 넘기지 못한다.

}

if (arr[6]==1 || arr[6]==2) { // 인덱스 6번째 값이 1900년대는 981028-'1'또는'2'이부분

var y = parseInt(idfyText.value.substring(0,2)); // substring : 일정 문자열을 반환. substring(시작인덱스, 종료인덱스) 시작인덱스부터 종료인덱스 전까지 반환. (0번째 배열인 '9'하고 1번째 배열인 '8')

var m = parseInt(idfyText.value.substring(2,4)); // 2이상부터 4미만까지. 인덱스2<=문자열<인덱스4 (위에선 1 과 0)

var d = parseInt(idfyText.value.substring(4,6)); // 4이상부터 6미만까지. 인덱스4<=문자열<인덱스6(2 와 8)

f.my_year.value = 1900+y; // html의 년도(id,name) 텍스트필드에 년도를 전달하겠다.

f.month.value = m; // html의 월(id,name)의 셀렉에 월의 값을 전달하겠다.

f.day.value = d; // html의 일(id,name)의 셀렉에 일의 값을 전달하겠다.

} else if(arr[6]==3||arr[6]==4){ // 인덱스 6번째 값이 2000년대는 021028-'3'또는'4' 이부분

var y = parseInt(idfyText.value.substring(0,2)); // 위와 동일.

var m = parseInt(idfyText.value.substring(2,4));

var d = parseInt(idfyText.value.substring(4,6));

f.my_year.value = 2000+y; // 년도 ex)2000+02 = 2002

f.month.value = m; // 월

f.day.value = d; // 일

}

//관심분야가 하나라도 체크 되지 않은 경우

if (f.ch[0].checked == false &&f.ch[1].checked == false &&

f.ch[2].checked == false &&f.ch[3].checked == false &&

f.ch[4].checked == false) {

alert("관심분야를 체크해 주세요");

return false;

}

//자기소개 1글자라도 적지 않은 경우

if (f.my_intro.value=="") {

alert("자기소개를 입력해주세요");

return false;

}

function check(re,what,message){//정규화데이터,아이템 id,메세지

if (re.test(what.value)) {//what의 문자열에 re의 패턴이 있는지 나타내는 함수 test

//만약 내가 입력한 곳의 값이 정규화 데이터를 썼다면 true를 반환해서 호출 된 곳으로 리턴됨

return true;

}

alert(message);

what.value = "";

what.focus();

}

function sample4_execDaumPostcode() {

new daum.Postcode({

oncomplete: function(data) {

// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.

// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.

var roadAddr = data.roadAddress; // 도로명 주소 변수

var extraRoadAddr = ''; // 참고 항목 변수

// 법정동명이 있을 경우 추가한다. (법정리는 제외)

// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.

if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){

extraRoadAddr += data.bname;

}

// 건물명이 있고, 공동주택일 경우 추가한다.

if(data.buildingName !== '' && data.apartment === 'Y'){

extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);

}

// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.

if(extraRoadAddr !== ''){

extraRoadAddr = ' (' + extraRoadAddr + ')';

}

// 우편번호와 주소 정보를 해당 필드에 넣는다.

document.getElementById('sample4_postcode').value = data.zonecode;

document.getElementById("sample4_roadAddress").value = roadAddr;

document.getElementById("sample4_jibunAddress").value = data.jibunAddress;

// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.

if(roadAddr !== ''){

document.getElementById("sample4_extraAddress").value = extraRoadAddr;

} else {

document.getElementById("sample4_extraAddress").value = '';

}

var guideTextBox = document.getElementById("guide");

// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.

if(data.autoRoadAddress) {

var expRoadAddr = data.autoRoadAddress + extraRoadAddr;

guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';

guideTextBox.style.display = 'block';

} else if(data.autoJibunAddress) {

var expJibunAddr = data.autoJibunAddress;

guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';

guideTextBox.style.display = 'block';

} else {

guideTextBox.innerHTML = '';

guideTextBox.style.display = 'none';

}

}).open();

}

</script>

</style>

</head>

<body>

<p>

</p>

<FORM name ="f" method="post" onsubmit="return validate()"

action="MAILTO:creatorheh@gmail.com">

<div id="dv" style = "font-weight: bold;" font-size: 18px">회원 기본 정보

</div></td>

</tr>

<tr>

<div style = "font-weight: bold;">아이디:

</div></td>

4~12자의 영문 대소문자와 숫자로만 입력</td>

</tr>

<tr>

4~12자의 영문 대소문자와 숫자로만 입력</td>

</tr>

<tr>

</tr>

<tr>

예) id@domain.com</td>

</tr>

<tr>

</tr>

</tr>

<tr>

<td bgcolor="lightgray" align="center"><div style = "font-weight: bold;">주민등록번호</div></td>

예) 1234561234567</td>

</tr>

<tr>

<td><input type="text" id="my_year" name="my_year" size="4" maxlength="4">년

</select>

월<select name="day" id="day">

</select>일</td>

</tr>

<tr>

<td>

<input type="checkbox" name="ch" value="COMPUTER">컴퓨터

<input type="checkbox" name="ch" value="INTERNET">인터넷

<input type="checkbox" name="ch" value="TRABLE">여행

<input type="checkbox" name="ch" value="MOVIE">영화감상

</td>

</tr>

</tr>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div

mapOption = {

center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표

level: 5 // 지도의 확대 레벨

};

//지도를 미리 생성

var map = new daum.maps.Map(mapContainer, mapOption);

//주소-좌표 변환 객체를 생성

var geocoder = new daum.maps.services.Geocoder();

//마커를 미리 생성

var marker = new daum.maps.Marker({

position: new daum.maps.LatLng(37.537187, 127.005476),

map: map

});

function sample5_execDaumPostcode() {

new daum.Postcode({

oncomplete: function(data) {

var addr = data.address; // 최종 주소 변수

// 주소 정보를 해당 필드에 넣는다.

document.getElementById("sample5_address").value = addr;

// 주소로 상세 정보를 검색

geocoder.addressSearch(data.address, function(results, status) {

// 정상적으로 검색이 완료됐으면

if (status === daum.maps.services.Status.OK) {

var result = results[0]; //첫번째 결과의 값을 활용

// 해당 주소에 대한 좌표를 받아서

var coords = new daum.maps.LatLng(result.y, result.x);

// 지도를 보여준다.

mapContainer.style.display = "block";

map.relayout();

// 지도 중심을 변경한다.

map.setCenter(coords);

// 마커를 결과값으로 받은 위치로 옮긴다.

marker.setPosition(coords)

}

});

}

}).open();

}

</script>

<tr>

</tr>

</table>

</p>

</script>

</body>

</html>

'빅데이터 교육과정 (2021-01-25 ~ 2021-06-24) > WEB (02-22 ~)' 카테고리의 다른 글

자바스크립트 비정규식 회원가입사이트 (0)	2021.03.05
Javascript 웹 API란? + 지도 API 쓰는 법 (카카오 지도 API) (0)	2021.03.04
자바스크립트 시계 표시하기 실습 (0)	2021.03.04
22일차 2021.3.3.수 자바스크립트 (0)	2021.03.04
21일차 2021.3.2.화 자바스크립트 (0)	2021.03.04

IT 공부

자바스크립트 정규식 회원가입사이트(지도 API 마크 포함)

'빅데이터 교육과정 (2021-01-25 ~ 2021-06-24) > WEB (02-22 ~)' 카테고리의 다른 글

티스토리툴바

자바스크립트 정규식 회원가입사이트(지도 API 마크 포함)

'빅데이터 교육과정 (2021-01-25 ~ 2021-06-24) > WEB (02-22 ~)' 카테고리의 다른 글

'빅데이터 교육과정 (2021-01-25 ~ 2021-06-24)/WEB (02-22 ~)' Related Articles

티스토리툴바