[js]네이버 회원가입 페이지 따라잡기: form태그의 onSubmit() 속성

페이지

 

 

 

 

function regCheck() {
	var gender = document.getElementById("gender").value;
	var email = document.getElementById("email").value;
	var mobile = document.getElementById("mobile").value;

	if (gender != "" && mobile != "" && idCheck() && pwCheck() && pwConfirm() && nameCheck() && birthCheck()) {
		if (email.length != 0) {
			if (emailCheck()) return true;
			else return false;
		}
		return true;
	} else {
		return false;
	}
}

 

form태그의 onSubmit속성 값을 onSubmit="return 함수()"로 지정하면, 함수의 반환 값이 true일때만 submit을 진행한다.

회원 필수 값 검증과 정규 표현식을 통한 유효성 검증에 성공했을 때만 form태그 내부의 데이터를 전송하기 위해서 onSubmit 속성을 사용했다.

 

---

 

---

아이디 확인

function idCheck() {
	var idReg = /^[a-z0-9][a-z0-9-_]{4,19}$/;
	var id = document.getElementById("id").value;
	var id_msg = document.getElementById("id_msg");
	if (id == "") {
		id_msg.innerHTML = "필수 정보입니다.";
		return;
	} else if (!idReg.test(id)) {
		id_msg.innerHTML = "5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.";
		return;
	} else {
		id_msg.innerHTML = "";
		return true;
	}
}

 

idReg는 5~20자리의 첫 글자는 영어(소문자)와 숫자, 그 이후에는 영어(소문자), 숫자, 특수문자(-, _)로 조합된 문자열을 의미한다.

^[a-z0-9]: 첫 글자
[a-z0-9-_]{4,19}: 나머지 글자
첫 글자(1) + 나머지(최소 4, 19) => 5 ~ 20자

 

정규 표현식.test(문자열)의 반환 값이 true이면 문자열이 정규식을 만족한 것이고, false이면 만족하지 못한 것이다.

 

아이디가 id인 input태그의 값이 변경된 후 마우스 커서가 해당 태그를 벗어날 때마다 idCheck()라는 함수를 호출한다.

아이디 값이 비어있거나 idReg를 만족하지 않으면 id가 id_msg인 p태그에 경고 문구를 출력한다.

idReg를 만족하면 true값을 반환한다. 

 

DB와 연동한 후 아이디 중복 검사도 추가로 구현할 계획 중에 있다. 

 

* ^: 데이터의 시작, $: 데이터의 끝

 

---

---

비밀번호 확인

function pwCheck() {
	var pwReg = /^[a-zA-Z0-9`\-=\\\[\];',\./~!@#\$%\^&\*\(\)_\+|\{\}:"<>\?]{8,16}$/;
	var pw = document.getElementById("pw").value;
	var pw_msg = document.getElementById("pw_msg");
	if (pw == "") {
		pw_msg.innerHTML = "필수 정보입니다.";
		return;
	} else if (!pwReg.test(pw)) {
		pw_msg.innerHTML = "8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.";
		return;
	} else {
		pw_msg.innerHTML = "";
		return true;
	}
}

pwReg는 8~16자리 사이의 영어(대소문자)와 숫자, 나열된 특수문자들로 조합된 문자열을 의미한다.

 

id가 pw인 input태그의 값이 변경된 후 마우스 커서가 이동할 때마다 pwCheck()라는 함수를 호출한다.

패스워드 값이 비어있거나 pwReg를 만족하지 않으면 id가 pw_msg인 p태그에 경고 문구를 출력한다.

pwReg를 만족하면 true값을 반환한다. 

 

---

첫 번째로 입력한 비밀번호가 pwReg를 만족하지 않은 상태

---

비밀번호 일치 확인

function pwConfirm() {
	var pw = document.getElementById("pw");
	var cPw = document.getElementById("cPw");

	var pw_msg = document.getElementById("pw_msg");
	var c_pw_msg = document.getElementById("c_pw_msg");
	if (!pwCheck()) {
		pw_msg.innerHTML = "다시 확인해주세요.";
		c_pw_msg.innerHTML = "";
		cPw.value = "";
		pw.focus();
		return;
	} else if (cPw.value == "") {
		c_pw_msg.innerHTML = "필수 정보입니다.";
		return;
	} else if (pw.value != cPw.value) {
		c_pw_msg.innerHTML = "비밀번호가 일치하지 않습니다.";
		cPw.focus();
		return;
	} else {
		c_pw_msg.innerHTML = "";
		return true;
	}
}

 

패스워드가 공백이거나("") pwReg를 만족하지 않은 상태이면, 패스워드 확인란을 비우고 패스워드 input태그로 커서를 이동시켰다.

패스워드 확인이 공백이거나 입력된 두 패스워드가 일치하지 않으면, c_pw_msg에 경고를 띄우고 패스워드 확인란으로 커서를 이동시켜 재입력을 유도했다.

 

모든 조건이 거짓이라면 두 패스워드가 일치하는 것이므로 true값을 반환한다.

 

---

---

생년월일 확인

function birthCheck() {
	var year = document.getElementById("year").value;
	var month = document.getElementById("month").value;
	var day = document.getElementById("day").value;
	var birth_msg = document.getElementById("birth_msg");

	if (year.length != 4) {
		birth_msg.innerHTML = "태어난 년도 4자리를 정확하게 입력하세요.";
		return;
	} else if (month == "") {
		birth_msg.innerHTML = "태어난 월을 선택하세요.";
		return;
	} else if (day == "" || day.length > 2) {
		birth_msg.innerHTML = "태어난 일(날짜) 2자리를 정확하게 입력하세요.";
		return;
	} else {
		if (day.length == 1) day = "0" + day;

		birthday = year + month + day;
		if (birthday.length != 8) {
			birth_msg.innerHTML = "생년월일을 다시 확인해주세요.";
			return;
		}
		var maxDaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		var maxDay = maxDaysInMonth[month - 1];
		if (month == 2 && (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)) maxDay = 29;
		if (day <= 0 || day > maxDay) {
			birth_msg.innerHTML = "생년월일을 다시 확인해주세요.";
			return;
		}
		birth_msg.innerHTML = "";

		var age = calcAge(birthday);
		if (age < 0) {
			birth_msg.innerHTML = "미래에서 오셨군요. ^^";
			return;
		} else if (age >= 100) {
			birth_msg.innerHTML = "정말이세요?";
			return;
		} else if (age < 14) {
			birth_msg.innerHTML = "만 14세 미만의 어린이는 보호자 동의가 필요합니다.";
			return;
		} else {
			return true;
		}
	}
}

function calcAge(birth) {
	var date = new Date();
	var year = date.getFullYear();
	var month = (date.getMonth() + 1);
	var day = date.getDate();
	if (month < 10)
		month = '0' + month;
	if (day < 10)
		day = '0' + day;
	var monthDay = month + '' + day;
	var birthdayy = birth.substr(0, 4);
	var birthdaymd = birth.substr(4, 4);

	var age = monthDay < birthdaymd ? year - birthdayy - 1 : year - birthdayy;
	return age;
}

---

 

 이름 정규식: /^[가-힣a-zA-Z]/

 

이메일 정규식: /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]/

 

나머지 검증 로직도 위와 동일하므로 jsp파일, js파일 첨부파일로 이를 대신하곘다.

 

naver_reg.zip

0.00MB

 

---

정규표현식 참고 링크

[Java] 정규표현식(Regular Expression) : 자주 쓰는 정규식 정리(휴대전화, 이메일, 비밀번호 등) (tistory.com)

[Java] 정규표현식(Regular Expression) : 자주 쓰는 정규식 정리(휴대전화, 이메일, 비밀번호 등)