0429 :: Y's Diary

0429

YDel 2022. 4. 29. 09:14

2022. 4. 29. 09:14

아래 문구들을 html파일이 아닌 jsp 파일에서 실행시키기

1. login.html

설명: 창에서의 아이디/비밀번호 입력요구 문구

파일 위치: garam > src > main > webapp > garam > login.html

<script>
	function login() {
		let mid = document.getElementById("mid");
		let errMsg = document.getElementById("errMsg");
		/* 속성 value == 값이 있냐 없냐 */
		/* 값이 없으면 errMsg div에 에러메시지를 날려준다. */
		if (mid.value == '') {
			/* 출력하는 방법 4가지 중 하나 */
			errMsg.innerHTML = "아이디(휴대폰번호)를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mid.focus();
			/* 값이 없고 에러메시지가 출력이 되면 더 이상 넘어가지 않게 한다. */
			return false;
		}
		/* mid를 한 것과 같이 만들고 mid의 자리에 mpw를 넣는다. */
		/* errMsg에는 비밀번호에 관한 에러메시지를 넣는다. */
		let mpw = document.getElementById("mpw");
		if (mpw.value == '') {
			errMsg.innerHTML = "비밀번호를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mpw.focus();
			return false;
		}
		console.log("login");
		/* 페이지가 지나가지 않도록 해주는 것: return false;  */
		/* 아이디와 비밀번호가 채워졌다면 지나갈 수 있도록 true를 사용한다. */
		return true;
	}
</script>

2. join01.html

설명: 약관 동의페이지에서 전체 동의 체크박스를 눌렀을 때 모든 약관에 동의되게 하는 스크립트

파일 위치: garam > src > main > webapp > garam > join01.html

<script>

let agree1 = document.getElementById("agree1");
let agree2 = document.getElementById("agree2");
let agree3 = document.getElementById("agree3");

function join02() {
	//checkbox checking
	if (!agree1.checked) {
		alert("서비스 이용약관 동의에 체크하세요");
		agree1.focus();
		return;
	}
	if (!agree2.checked) {
		alert("개인정보 수집 및 동의에 체크하세요");
		agree2.focus();
		return;
	}
	if (!agree3.checked) {
		alert("개인정보 3자 제공 동의에 체크하세요");
		agree3.focus();
		return;
	}
	location.href="join02.html";
	//location.replace("join02.html");
}

function chkAuto(t) {
	if (t.checked) {
		agree1.checked = true;
		agree2.checked = true;
		agree3.checked = true;
	} else {
		agree1.checked = false;
		agree2.checked = false;
		agree3.checked = false;
	}
	console.log("전체동의를 체크하였습니다." + t.checked);
}
</script>

3. 비밀번호/비밀번호 확인 (join02.html)

설명: 비밀번호와 비밀번호 확인란에 입력된 비밀번호가 일치하지 않을 시 초기화

function join02() {
	// 비밀번호 확인
	let pw = document.getElementById("pw");
	let pw2 = document.getElementById("pw2");
	if (pw.value != pw2.value) {
		alert("비밀번호가 일치하지 않습니다.");
		pw.value = "";
		pw2.value = "";
		pw.focus();
		return false;
	}

4. 비밀번호 유효성 검사 (8 ~ 12, [영문자, 숫자, 특수문자]) (join02.html)

설명: 영문자, 숫자, 특수문자 미입력시 alert창 띄워주며, 8자 이상이 안 되거나 12자를 초과하면 똑같이 경고창 띄움.

function pwChk(t) {
	if (t.value.length >= 8 && t.value.length <= 12) {
		let regE = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
	if (!regE.test(t.value)) {
		alert("비밀번호는 영문자, 숫자, 특수문자를 포함해야 합니다.");
		return false;
		}
	} else {
		alert("비밀번호는 8자 이상 12자 이하로 입력하셔야 합니다.");
}

5. 비밀번호 입력란 확인 기능 (join02.html)

설명: 사용자가 입력한 비밀번호와 비밀번호 확인란을 스스로 확인할 수 있게 하는 기능

function pwshow(t) {
	let pw2 = document.getElementById("pw2");
	if (t.checked) {
		pw.type = "text";
		pw2.type = "text";
		} else {
			pw.type = "password";
			pw2.type = "password";
		}
}

Y's Diary