반응형
*회원가입의 유효성 검증
-
회원가입 창에는 필수입력사항이 존재하고
-
1.중복확인을 눌렀을 때 아이디 중복확인popup 창이 뜨고 중복확인한 아이디를 부모창으로 전송한 후 자식창이 닫힌다.
-
2.비밀번호 txtbox에서 커서가 빠져 나가면 비밀번호와 비밀번호 확인에 값이 같인지 비교한 후 같다면 커서를 "이름"에 이동시키고 같지 않다면 경고창에 "비밀번호를 확인해 주세요"를 보여주고 초기화 시킨 후 커서를 비밀번호에 이동시킨다.
-
3.숫자 여섯개가 입력되면 커서를 주민번호 뒷자리로 이동시킨다.
-
4.숫자 7개가 입력되고 커서가 빠져나가면 주민번호의 유효성 검증(유효성 검증이 유효하면 성별, 생년원일,나이를 계산하여 채워준다/유효하지 않다면 경고창을 보여주고 주민번호 입력값을 초기화한후 커서를 주민번호 첫자리에 위치시킨다.)
-
5.우편번호 검색이 눌렸을때 popup창이 뜨고 이때 다음에서 제공하는 도로명주소를 사용해 동작하게 해준다. (주소나 우편번호가 클릭되면 부모창으로 전달하고 자식창을 닫고 커서를 상세주소로 이동시킨다.
-
6.초기화 버튼이 눌리면 HTML Form Control의 값을 초기화 시킨다.
-
7.가입 버튼이 눌리면 필수입력사항을 체크하고 해당 경고창을 보여준후 모두 입력되면 join.jsp에 값을 전달 한다.
*JavaScript에서 옵션 생성하기
-
1. <select> 얻기
-
var sel=document.getElememtById("Id");
-
2.select의 옵션 갯수 설정(초기화)
-
sel.length="남겨둘 옵션의 수"
-
3.옵션 생성
-
sel.options[index]=new Option(보여줄값,넘겨줄값);
-
<option value="넘겨줄 값">보여줄 값</option>이 되게 됨
-
동적으로 만들 수 있어 코드를 줄일 수 있다.
window.onload=function(){
//옵션 생성
//년
//var b_year=document.getElementById("b_year");
var obj=document.joinFrm;
var b_year=obj.b_year;//1.select 얻기
var date=new Date();
var year_idx=0;
//20살의 나이를 가진 년도에 selected
var flag_year=date.getFullYear()-20+1;
for(var i=1950; i<date.getFullYear()+1; i++){
//2.select의 옵션 생성 Option(보여질값, value값(넘겨줄값))
b_year.options[year_idx]=new Option(i,i);
if(flag_year==i){
b_year.selectedIndex=year_idx;
}//end if;
year_idx++;
}//end for
//b_year.options[50].selected = true;
//b_year.options[50].setAttribute("selected","selected");
//월 설정 1-12
var b_month=obj.b_month;
var month_idx=0;
for(var i=1; i<13; i++){
b_month.options[month_idx]=new Option(i,i);
month_idx++;
}//end for
//일 설정 1-31
var b_day=obj.b_day;
var day_idx=0;
for(var i=1; i<32; i++){
b_day.options[day_idx]=new Option(i,i);
day_idx++;
}//end for
//////////////////////////////////이벤트 등록/////////////////////////////////////////
document.getElementById("idDup").addEventListener("click",popupCenter);
document.getElementById("searchZip").addEventListener("click",popupCenter);
document.getElementById("daumZip").addEventListener("click",execPostcode);
document.getElementById("btnJoin").addEventListener("click",nullCheck);
document.getElementById("pass2").addEventListener("blur",chkPass);
document.getElementById("ssn1").addEventListener("keyup",moveSsn2);
document.getElementById("ssn2").addEventListener("keyup",chkSsn);
}//function-onload
<<<회원가입>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회 원 가 입</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#joinTitle{font-weight: bold; font-size: 20px;}
.tdalign{text-align: center}
table{margin: 0px auto}
tr{height:25px}
#wrap{width:1007px; margin: 0px auto;}
#joinHeader{width:1007px; height:195px;
background: #FFFFFF url(images/header.png) no-repeat;}
.span{color:#FF0000;}
</style>
<script type="text/javascript">
window.onload=function(){
//옵션 생성
//년
//var b_year=document.getElementById("b_year");
var obj=document.joinFrm;
var b_year=obj.b_year;//1.select 얻기
var date=new Date();
var year_idx=0;
//20살의 나이를 가진 년도에 selected
var flag_year=date.getFullYear()-20+1;
for(var i=1950; i<date.getFullYear()+1; i++){
//2.select의 옵션 생성 Option(보여질값, value값(넘겨줄값))
b_year.options[year_idx]=new Option(i,i);
if(flag_year==i){
b_year.selectedIndex=year_idx;
}//end if;
year_idx++;
}//end for
//b_year.options[50].selected = true;
//b_year.options[50].setAttribute("selected","selected");
//월 설정 1-12
var b_month=obj.b_month;
var month_idx=0;
for(var i=1; i<13; i++){
b_month.options[month_idx]=new Option(i,i);
month_idx++;
}//end for
//일 설정 1-31
var b_day=obj.b_day;
var day_idx=0;
for(var i=1; i<32; i++){
b_day.options[day_idx]=new Option(i,i);
day_idx++;
}//end for
//////////////////////////////////이벤트 등록/////////////////////////////////////////
document.getElementById("idDup").addEventListener("click",popupCenter);
document.getElementById("searchZip").addEventListener("click",popupCenter);
document.getElementById("daumZip").addEventListener("click",execPostcode);
document.getElementById("btnJoin").addEventListener("click",nullCheck);
document.getElementById("pass2").addEventListener("blur",chkPass);
document.getElementById("ssn1").addEventListener("keyup",moveSsn2);
document.getElementById("ssn2").addEventListener("keyup",chkSsn);
}//function-onload
function moveSsn2(){
//주민번호 앞자리에서 6글자가 입력되면 커서를 ssn2로 이동
/* if(document.getElementById("ssn1").value.length==6){
document.joinFrm.ssn2.focus();
}//end if나나!! */
var obj=document.joinFrm;
if(obj.ssn1.value.length==6){
obj.ssn2.focus();
}//end if
if(obj.ssn1.value.replace(/[0-9]/g,"")!=""){
alert("주민번호는 숫자로만 구성됩니다.");
obj.ssn1.value="";
obj.ssn1.focus();
return;
}//end if
}//moveSsn2
function chkSsn(){
//입력한 주민번호의 유효성 검증
}//chkSsn
function nullCheck(){
//필수 입력값 체크
}//nullCheck
function chkPass(){
//비밀번호가 일치 하는지 체크
var obj=document.joinFrm;
if(obj.pass1.value != obj.pass2.value){
alert("비밀번호가 틀립니다.");
obj.pass1.value="";
obj.pass2.value="";
obj.pass1.focus();
return;
}//end if
}//chkPass
function popupCenter(){
var width=0;
var height=0;
var html="";
var id=""
if(this.id=="idDup"){
// alert("아이디 중복확인");
id="idDup";
html="id_dup.html";
width=502;
height=303;
}//end if
if(this.id=="searchZip"){
// alert("우편번호확인");
id="searchZip";
html="search_zip.html";
width=408;
height=419;
}//end if
/* if(this.id=="daumZip"){
// alert("다음");
//postcode.map.daum.net/guide
id="daumZip";
html="daum_zip.html";
width=502;
height=303;
}//end if */
window.open(html,id,"width="+width+",height="+height);
}//popupCenter
</script>
<style type="text/css">
</style>
<!-- script를 body에 넣었을때 에러가 발생하면 사용자는 에러메세지를 계속 클릭한 이후 제공하는 서비스를 볼 수 있다.
script를 head에 넣었다면 에러가 발생하더라도 body는 에러메세지 없이 그대로 제공된다. -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function execPostcode() {
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('zipcode').value = data.zonecode;
document.getElementById("roadAddr").value = roadAddr;
//document.getElementById("jibunAddr").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddr").value = extraRoadAddr;
} else {
document.getElementById("extraAddr").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>
</head>
<body>
<div id="wrap">
<div id="joinHeader"></div>
<div id="joinContent">
<form action="member.jsp" name="joinFrm">
<table>
<tr>
<td class="tdalign" colspan="2"><span id="joinTitle">회원가입</span></td>
</tr>
<tr>
<td><span class="span">*</span>아이디</td>
<td>
<input type="text" class="inputBox" name="id" readonly="readonly" style="width:100px">
<button type="button" class="btn" id="idDup">중복확인</button>
</td>
</tr>
<tr>
<td><span class="span">*</span>비밀번호</td>
<td><input type="password" class="inputBox" name="pass1" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>비밀번호 확인</td>
<td><input type="password" class="inputBox" id="pass2" name="pass2" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>이름</td>
<td><input type="text" class="inputBox" name="name" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>주민번호</td>
<td><input type="text" class="inputBox" name="ssn1" id="ssn1" style="width:60px" maxlength="6">
<label> - </label>
<input type="password" class="inputBox" name="ssn2" id="ssn2" style="width:70px" maxlength="7"></td>
</tr>
<tr>
<td> 성별</td>
<td><input type="radio" value="남자" name="gender" name="pass">남자
<input type="radio" value="여자" name="gender">여자</td>
</tr>
<tr>
<td> 생년월일</td>
<td>
<select name="b_year" class="inputBox">
</select>
<label>년</label>
<select name="b_month" class="inputBox">
</select>
<label>월</label>
<select name="b_day" class="inputBox">
</select>
<label>일</label>
</td>
</tr>
<tr>
<td> 나이</td>
<td><input type="text" name="age" class="inputBox" style="width:30px"></td>
</tr>
<tr>
<td> 관심언어</td>
<td>
<input type="checkbox" value="Java" name="interestlang">Java
<input type="checkbox" value="C/C++" name="interestlang">C/C++
<input type="checkbox" value="Python" name="interestlang">Python
<input type="checkbox" value="VB" name="interestlang">VB
<input type="checkbox" value="JSP" name="interestlang">JSP
<input type="checkbox" value="Servlet" name="interestlang">Servlet
<input type="checkbox" value="ASP" name="interestlang">ASP
<input type="checkbox" value="php" name="interestlang">php
</td>
</tr>
<tr>
<td> 결혼여부</td>
<td><input type="radio" value="미혼" name="marrigeFlag" checked="checked">미혼
<input type="radio" value="기혼" name="marrigeFlag">기혼</td>
</tr>
<tr>
<td> 결혼기념일</td>
<td><input type="text" maxlength="4" name="m_year" class="inputBox" style="width:40px">년
<input type="text" maxlength="2" name="m_month" class="inputBox" style="width:20px">월
<input type="text" maxlength="2" name="m_day" class="inputBox" style="width:20px">일</td>
</tr>
<tr>
<td><span class="span">*</span>우편번호</td>
<td><input type="text" readonly="readonly" name="zipcode1" class="inputBox" style="width:30px">
<label> - </label>
<input type="text" readonly="readonly" name="zipcode2" class="inputBox" style="width:30px">
변경된<input type="text" readonly="readonly" name="zipcode" id="zipcode" class="inputBox" style="width:50px">
<button type="button" class="btn" id="searchZip">우편번호검색</button>
<button type="button" class="btn" id="daumZip">다음우편번호검색</button></td>
</tr>
<tr>
<td><span class="span">*</span>주소</td>
<td>
<input type="text" readonly="readonly" name="addr1" id="roadAddr" class="inputBox" style="width:200px">
참고 주소 : <input type="text" id="extraAddr" class="inputBox"/>
</td>
</tr>
<tr >
<td><span class="span">*</span>상세주소</td>
<td><input type="text" class="inputBox" name="addr2" style="width:200px"></td>
</tr>
<tr valign="middle">
<td> 가입인사</td>
<td><textarea name="greetings" class="inputBox" style="width:250px; height:100px"></textarea></td>
</tr>
<tr>
<td colspan="2" class="tdalign">
<button type="button" class="btn" id="btnJoin" onclick="">가입</button>
<button type="reset" class="btn">초기화</button>
</td>
</tr>
<tr>
<td colspan="2"><span class="span">*는 필수 입력 사항입니다.</span></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{width:408px; height: 419px; margin: 0px auto; background: #FFFFFF url(images/zip_background.png) no-repeat;}
#zipForm{text-align: center; padding-top: 50px; }
#zipcodeContent{margin: 10px}
table{border-spacing: 0px;}
td,tr{border: 1px solid #333; text-align: center; }
#zipTd{width:80px; }
#addrTd{width:310px; }
</style>
<script type="text/javascript">
function sendZip(zipcode,addr){
//alert(zipcode+"/"+addr);
//opener.window.document.부모창폼이름.value=부모창에 전달할 값;
/* opener.window.document.joinFrm.zipcode1.value=zipcode.substr(0, zipcode.indexOf("-"));
opener.window.document.joinFrm.zipcode2.value=zipcode.substr(zipcode.indexOf("-")+1);
opener.window.document.joinFrm.addr1.value=addr;
self.close();//내가한 부분 */
//강사님 부분
var openObj=opener.window.document.joinFrm;
openObj.zipcode1.value=zipcode.split("-")[0];
openObj.zipcode2.value=zipcode.split("-")[1];
openObj.addr1.value=addr;
openObj.addr2.focus();
self.close();
}//sendZip
</script>
</head>
<body>
<div id="wrap">
<div id="zipForm">
<form name="zipFrm">
<label>동이름</label>
<input type="text" name="dong" class="inputBox">
<input type="button" value="조회" class="btn">
</form>
</div>
<div id="zipcodeContent">
<table>
<thead>
<tr>
<th id="zipTd">우편번호</th>
<th id="addrTd">주소</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="javascript:sendZip('111-111','서울시 강남구 역삼동')">111-111</a></td>
<td><a href="javascript:sendZip('111-111','서울시 강남구 역삼동')">서울시 강남구 역삼동</a></td>
</tr>
<tr>
<td><a href="javascript:sendZip('112-112','서울시 동대문구 동대문동')">112-112</a></td>
<td><a href="javascript:sendZip('112-112','서울시 동대문구 동대문동')">서울시 동대문구 동대문동</a></td>
</tr>
<tr>
<td><a href="javascript:sendZip('333-333','경기도 의왕시 의왕동')">333-333</a></td>
<td><a href="javascript:sendZip('112-112','서울시 동대문구 동대문동')">경기도 의왕시 의왕동</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- script를 body에 넣었을때 에러가 발생하면 사용자는 에러메세지를 계속 클릭한 이후 제공하는 서비스를 볼 수 있다.
script를 head에 넣었다면 에러가 발생하더라도 body는 에러메세지 없이 그대로 제공된다. -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function execPostcode() {
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('zipcode').value = data.zonecode;
document.getElementById("roadAddr").value = roadAddr;
document.getElementById("jibunAddr").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddr").value = extraRoadAddr;
} else {
document.getElementById("extraAddr").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>
</head>
<body>
<input type="text" id="zipcode" placeholder="우편번호">
<input type="button" onclick="execPostcode()" value="우편번호 찾기">
<input type="text" id="roadAddr" placeholder="도로명주소">
<input type="text" id="jibunAddr" placeholder="지번주소">
<span id="guide" style="color:#999;display:none"></span>
<input type="text" id="extraAddr" placeholder="참고항목">
<br/>
<input type="button" value="사용" class="btn"/>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 82일차-JavaScript_closure/class (0) | 2019.03.03 |
|---|---|
| 81일차-JavaScript_회원가입 추가/canvas,storage,JSON (0) | 2019.02.28 |
| 79일차-javaScript_페이지 이동 방법과 popup창 (0) | 2019.02.19 |
| 78일차-JavaScript+a (0) | 2019.02.18 |
| 77일차-JavaScript_함수 (0) | 2019.02.17 |