JoinForm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입(정규식)</title>
<script src="js/checkreg.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
</head>
<body>
<div align="center">
<form id="f1" action="mailto:kysktj1234@naver.com?subject=회원가입" method="post">
<table border="1">
<tr>
<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30">회원 기본 정보</th>
</tr>
<tr>
<td width="20%" align="center" bgcolor="#D4F4FA" height="25">아이디 : </td>
<td width="80%"><input type="text" maxlength="12" name="my_id" id="my_id" height="25" onchange="chkId(this.value)"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25">비밀번호 : </td>
<td><input type="password" maxlength="12" name="my_pw" id="my_pw" onchange="chkPw(this.value)"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25">비밀번호확인 : </td>
<td><input type="password" maxlength="12" id="pwd_check" onchange="chkPwc(this.value)"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25">메일주소 : </td>
<td><input type="email" id="my_email" name="my_email" onchange="chkEmail(this.value)"> 예) id@domain.com </td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25">이름 : </td>
<td><input type="text" id="my_name" name="my_name" onchange="chkName(this.value)"></td>
</tr>
<tr>
<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30" height="25">개인 신상 정보</th>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA">우편번호 : </td>
<td><input type="text" id="postcode" name="postcode" value="우편번호" readonly>
<input type="button" value="우편번호 찾기" onclick="DaumPostcode()"><br>
<input type="text" id="roadAddress" name="roadAddress" value="도로면 주소" readonly>
<input type="text" id="jibunAddress" name="jibunAddress" value="지번주소" readonly><br>
<input type="text" name="detailAddress" value="상세주소">
<input type="text" id="extraAddress" name="extraAddress" value="참고주소" readonly></td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25" height="25">주민등록번호 : </td>
<td><input type="text" id="my_num1" name="my_num1" maxlength="6" size = "15">
- <input type="password" id="my_num2" name="my_num2" maxlength="7" size = "15" onchange="chkNum()">
예)123456-1234567 </td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25" height="25">생일 : </td>
<td><input type="text" id="my_year" name="my_year" size="4" readonly>년
<input type="text" id="my_month" name="my_month" size="2" readonly>월
<input type="text" id="my_day" name="my_day" size="2" readonly>일
</td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA" height="25">관심분야 : </td>
<td>
<input type="checkbox" name="Interest" value="computer">컴퓨터
<input type="checkbox" name="Interest" value="internet">인터넷
<input type="checkbox" name="Interest" value="trip">여행
<input type="checkbox" name="Interest" value="movie">영화감상
<input type="checkbox" name="Interest" value="music">음악감상
</td>
</tr>
<tr>
<td align="center" bgcolor="#D4F4FA">자기소개</td>
<td><textarea rows="8" cols="60" id="intro"></textarea></td>
</tr>
</table>
<br>
<input type="button" value="회원 가입" onclick="chk()">
<input type="reset" value="다시 입력">
</form>
</div>
</body>
</html>reg.js (자바스크립트)
// 주소
function DaumPostcode() {
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('postcode').value = data.zonecode; // 우편번호
document.getElementById("roadAddress").value = roadAddr; // 도로명
document.getElementById("jibunAddress").value = data.jibunAddress; // 동 주소
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddress").value = extraRoadAddr;
} else {
document.getElementById("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();
}
// 정규식
var idPwChk = /^[a-zA-Z0-9]{4,12}$/; // 아이디, 비밀번호 정규식
var emailChk = /^[a-zA-Z0-9]+@([a-zA-Z0-9]{1,10})\.([a-zA-Z]{1,10})+$/; //이메일 정규식
var nameChk = /[가-힣]{2,}/; // 이름 정규식
var numChk = /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/; // 주민번호 정규식
// true/false
var ynId="no"; // ID check Yes or No
var ynPw="no"; // Password
var ynPwc="no"; // Password Check
var ynMail="no";// Email
var ynName="no";// Name
var ynNum="no"; // Num
function chk() {
var inter = 0;
var arrInterest = document.getElementsByName("Interest"); // 관심분야
var introTa = document.getElementById("intro"); // 자기소개
var pcode = document.getElementById("postcode"); // 우편번호
for(var i=0; i<arrInterest.length; i++){
if(arrInterest[i].checked){
inter++;
break;
}
}
if(ynId!="yes"){
chkId("");
}else if(ynPw!="yes"){
chkPw("");
}else if(ynPwc!="yes"){
chkPwc("");
}else if(ynMail!="yes"){
chkEmail("");
}else if(ynName!="yes"){
chkName("");
}else if(pcode.value=="우편번호"){
alert("주소를 입력해주세요.");
pcode.focus();
}else if(ynNum!="yes"){
chkNum("");
}else if(inter==0){
alert("관심분야를 선택해주세요.");
}else if(introTa.value==""){
alert("자기소개를 입력해주세요.");
introTa.focus();
}
else{
f1.submit();
}
}
function chkId(myId) { // 아이디 검사
if(idPwChk.test(myId)){
ynId="yes"
}else{
alert("아이디를 다시 확인해주세요.")
ynId="no";
f1.my_id.value="";
f1.my_id.focus();
}
}
function chkPw(myPw) { // 비밀번호 검사
var myId = document.getElementById("my_id").value;
if(myPw==myId){
alert("아이디와 비밀번호는 동일하게 사용할 수 없습니다.");
f1.my_pw.value="";
ynPw="no";
f1.my_pw.focus();
}else if(idPwChk.test(myPw)){
ynPw="yes";
}else{
alert("비밀번호를 다시 확인해주세요.")
ynPw="no";
f1.my_pw.value="";
ynPw="no";
f1.my_pw.focus();
}
}
function chkPwc(pwChk) {
var myPw = document.getElementById("my_pw").value; // 비밀번호 확인 검사
if(pwChk==""){
alert("비밀번호 확인을 다시 확인해주세요.");
f1.pwd_check.value="";
ynPwc="no";
f1.pwd_check.focus();
}else if(pwChk==myPw){
ynPwc="yes";
}else{
alert("비밀번호가 일치하지 않습니다.");
f1.pwd_check.value="";
ynPwc="no";
f1.pwd_check.focus();
}
}
function chkEmail(myEmail) { // 이메일 검사
if(emailChk.test(myEmail)){
ynMail="yes";
}else{
alert("이메일을 다시 확인해주세요.");
ynMail="no";
f1.my_email.value="";
f1.my_email.focus();
}
}
function chkName(myName) { // 이름 검사
if(nameChk.test(myName)){
ynName="yes";
}else{
alert("이름을 다시 확인해주세요.");
ynName="no";
f1.my_name.value="";
f1.my_name.focus();
}
}
function chkNum() { // 주민등록번호 검사
var num1 = document.getElementById("my_num1"); // 주민등록번호 앞
var num2 = document.getElementById("my_num2"); // 주민등록번호 뒤
var addYear = document.getElementById("my_year"); // 생일 - 년
var addMon = document.getElementById("my_month"); // 생일 - 월
var addDay = document.getElementById("my_day"); // 생일 - 일
var FirstNum = num1.value.substring(0, 1); // 맨 앞자리 숫자
var num = (num1.value)+"-"+(num2.value); // 주민등록번호
if(numChk.test(num)){
var arrNum1 = new Array(); // 앞자리를 담을 배열
var arrNum2 = new Array(); // 뒷자리를 담을 배열
for (var i = 0; i < num1.value.length; i++) {
arrNum1[i] = num1.value.charAt(i);
} // 주민번호 앞자리를 배열에 순서대로 담는다.
for (var i = 0; i < num2.value.length; i++) {
arrNum2[i] = num2.value.charAt(i);
} // 주민번호 뒷자리를 배열에 순서대로 담는다.
var tempSum = 0;
for (var i = 0; i < num1.value.length; i++) {
tempSum += arrNum1[i] * (2 + i);
} // 주민번호 검사방법을 적용하여 앞 번호를 모두 계산하여 더함
for (var i = 0; i < num2.value.length - 1; i++) {
if (i >= 2) {
tempSum += arrNum2[i] * i;
} else {
tempSum += arrNum2[i] * (8 + i);
}
} // 같은방식으로 앞 번호 계산한것의 합에 뒷번호 계산한것을 모두 더함
if ((11 - (tempSum % 11)) % 10 != arrNum2[6]) {
alert("주민번호를 다시 확인해주세요.");
num1.value = "";
num2.value = "";
ynNum="no";
num1.focus();
} else {
ynNum = "yes";
addYear.value = arrNum1[0]+arrNum1[1]; // 년
console.log(addYear.value);
if(arrNum1[0]=="0"){
addYear.value = "20"+addYear.value; // 맨 앞이 0이면 20+년
}else{
addYear.value = "19"+addYear.value; // 아니면 19+년
}
addMon.value = arrNum1[2]+arrNum1[3]; // 월
addDay.value = arrNum1[4]+arrNum1[5]; // 일
}
}else{
alert("주민등록번호를 다시 확인해주세요.");
num1.value = "";
num2.value = "";
ynNum="no";
num1.focus();
}
}반응형
'Java > java' 카테고리의 다른 글
| JSP 문법 (0) | 2020.08.26 |
|---|---|
| 서블릿 (Servlet) (0) | 2020.08.25 |
| 자바스크립트 (JavaScript) (0) | 2020.08.20 |
| 네트워크 (0) | 2020.08.14 |
| 스레드 (Thread) (0) | 2020.08.13 |
