Frontend/JavaScript
22. JavaScript, 총정리 (회원가입)
개발개발빈이
2022. 6. 21. 20:09
○ JavaScript
- JavaScript (또는 jQuery)를 사용하는 이유
① Frontend(UI, View)단에서 서로 다른 문법(이종)간의 데이터를 교류하기 위해
② 데이터의 유효성을 검증하기 위해
○ JavaScript를 이용한 회원가입 폼
1) 회원가입 폼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<style></style>
</head>
<body>
<h3>회원가입</h3>
<!--.jsp 로그인 성공실패를 JAVA언어로-->
<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
아이디 :
<input type="text" name="uid" id="uid" class="line">
<input type="button" value="ID중복확인" onclick="getID()">
<input type="button" value="ID적용" onclick="setID()">
<hr>
비밀번호 :
<input type="password" name="upw" id="upw">
<hr>
주민번호 :
<input type="text" name="jumin1" id="jumin1" size="6" maxlength="6" onkeyup="moveCursor()">
-
<input type="password" name="jumin2" id="jumin2" size="7" maxlength="7">
<hr>
약관동의 :
<input type="checkbox" name="agree" id="agree">
<hr>
<input type="submit" value="가입1">
<input type="reset" value="취소">
<input type="button" value="가입2" onclick="validate2()">
</form>
</body>
</html>
2) JavaScript
① <input type="text" name="uid" id="uid" class="line">에 접근해 보기
// 1) <form>의 컨트롤요소 접근시 name 사용(비추)
alert(document.memfrm.uid.value);
// 2) <form>의 컨트롤요소 접근시 id 사용(추천)
alert(document.getElementById("uid").value); //text에 입력한 내용이 value
// 3) tag name으로 접근 (본문에서 <input>태그들 접근)
alert(document.getElementsByTagName("input")); //[object HTMLCollection]
// <input>태그들 중에서 0번째 접근
alert(document.getElementsByTagName("input")[0]); //[object HTMLInputElement]
//4) class name으로 접급
alert(document.getElementsByClassName("line")); //[object HTMLCollection]
② <input type="text" name="uid" id="uid" class="line">에 값 대입하기
function setID(){
let str="SOLDESK";
// 1) name접근(비추)
document.memfrm.uid.value=str;
// 2) id접근(추천)
document.getElementById("uid").value=str;
// 3) tag name 접근
document.getElementsByTagName("input")[0].value=str;
}//setID() end
③ 키보드로 한글자 입력할 때마다 숫자가 1씩 증가하고, 6이 되면 옆으로 커서 이동
function moveCursor(){
// 1) 주민번호 앞칸(id=jumin1)의 입력값 가져오기
var jumin1=document.getElementById("jumin1").value;
// 2) jumin1변수값의 글자개수가 6개이면 커서를 id=jumin2로 이동하기
if(jumin1.length==6){
document.getElementById("jumin2").focus(); //커서생성
}
}//moveCursor() end
④ 회원가입 폼에 대한 유효성 검사
function validate(){//회원가입 폼에 대한 유효성 검사
// 1) 아이디 글자개수가 8~12사이인지 확인하시오
var uid = document.getElementById("uid").value;
uid=uid.trim();
if(!(uid.length>=8 && uid.length<=12)){
alert("아이디는 8~12글자 이내로 입력해주세요"); //조건미충족시 경고창
uid=document.getElementById("uid").focus(); //다시 입력할 수 있도록 커서
return false; //폼이 전송되지 않도록 false 반환
}//if end
// 2) 비밀번호 글자개수가 5~10사이인지 확인하시오
var upw = document.getElementById("upw").value;
upw=upw.trim();
if(!(upw.length>=5 && upw.length<=10)){
alert("비밀번호는 5~10글자 이내로 입력해주세요");
upw=document.getElementById("upw").focus();
return false;
}//if end
// 3) 주민번호 앞칸이 숫자형 글자개수 6인지 확인하시오
var jumin1 = document.getElementById("jumin1").value;
jumin1=jumin1.trim();
if(jumin1.length!=6 || isNaN(jumin1)){//isNaN() 숫자인지
alert("주민번호 앞자리 6글자 숫자로 입력해주세요");
document.getElementById("jumin1").value="";
document.getElementById("jumin1").focus();
return false;
}//if end
var jumin2 = document.getElementById("jumin2").value;
jumin2=jumin2.trim();
if(jumin2.length!=7 || isNaN(jumin2)){//isNaN() 숫자인지
alert("주민번호 뒷자리 7글자 숫자로 입력해주세요");
document.getElementById("jumin2").value="";
document.getElementById("jumin2").focus();
return false;
}//if end
// 4) 약관동의에 체크했는지 확인하시오
if(document.getElementById("agree").checked==false){
alert("약관에 동의해 주세요");
return false;
}//if end
alert("회원가입 폼을 서버로 전송합니다");
return true; //모든 검사 통과하면 <form name=memfrm>폼을 서버로 전송
}//validate() end
⑤ HTML 태그 속성과 동일한 기능의 자바스크립트 함수 또는 속성
function validate2(){
//<form name="memfrm" id="memfrm"></form>
var frm=document.getElementById("memfrm");
//<form action=ok.jsp></form> 와 동일한 기능의 자바스크립트 속성
frm.action="ok2.jsp"
//<input type=submit> 과 동일한 기능의 자바스크립트 함수
frm.submit();
//<input type=reset> 과 동일한 기능의 자바스크립트 함수
//폼 양식 내에 있는 폼 컨트롤 요소가 가지고 있던 최초의 상태로 복귀
frm.reset();
}//validate2() end