[JSP] - Validation

오동훈·2021년 4월 16일
0

JSP

목록 보기
6/6

Javascript로 validation 체크하여 alert 창을 띄우는 방법에 대해 정리해보려 합니다.
form에 필수로 입력해야 하는 값을 입력하지 않았을 때 alert 창을 띄우려고 합니다.

1. JSP form 예제 📕

<body>
<form name="memberJoin" action=" memberJoinOk.jsp" method="post">
 <!-- form name 은 반드시 파일명과 같게 한다. -->
<center>
<table border=1>
<tr>
	<td colspan="2" align=center>
      <b><font size=5>회원가입 페이지</font></b> 
    </td></tr>
<tr>
	<td>아이디 : </td>
	<td><input type="text" name="id" readonly/>
	<input type=button value="ID Check" onclick="check_id()" 
    		onmouseover="this.style.cursor='hand';">
	</td></tr>
<tr>
	<td>비밀번호 :  </td>
	<td><input type="password" name="pass"/></td></tr>
	
<tr>
	<td>이름 : </td>
	<td><input type="text" name="name"/></td></tr>
<tr>
	<td>나이 : </td>
	<td><input type="text" name="age" maxlength=2 size=5/></td></tr>
<tr>
	<td>성별 : </td>
	<td><input type="radio" name="gender" value="" checked/>남자
	<input type="radio" name="gender" value=""/>여자 </td></tr>
<tr>
	<td>이메일 주소 : </td>
	<td><input type="text" name="email" size=30/></td></tr>
<tr>
	<td colspan="2" align=center>
	<!-- <input type="submit" value="회원가입하기"> &nbsp;&nbsp;  -->
    	<input type="button" value=회원가입 onclick="valid_check()">
    	<a href="javascript:memberJoin.reset()">다시작성</a>
</td></tr>
</table></center></form>
</body>

  • form의 name은 "memberJoin"입니다.

2. input text 값 입력 확인 📙

function valid_check()
{
	/* alert("사용자 함수를 호출함"); */
	if (document.memberJoin.id.value == "")
	{
		alert("아이디를 입력하여 주시기 바랍니다.");
		document.memberJoin.id.focus();
		return false;
	}
}
  • id의 값이 없으면 id에 focus가 가도록 했고, alert 창을 띄웠습니다.
  • 따라서 id값을 입력하지 않으면 form이 제출되지 않습니다.
if ((document.memberJoin.id.value.length < 4) || 
    	(document.memberJoin.id.value.length >= 9))
	{
		alert("아아디는 4자에서 8자까지만 입력 해주세요");
		document.memberJoin.id.focus();
		return false;
	}
  • id값이 4 ~ 8자 사이가 아니라면 id에 focus가 가도록 했고, alert 창을 띄웠습니다.
  • 마찬가지로 id값을 입력하지 않으면 form이 제출되지 않습니다.
if (document.memberJoin.pass.value == "")
	{
		alert("비밀번호를 입력하여 주시기 바랍니다.");
		document.memberJoin.pass.focus();
		return false;
	}
  • pass값이 비어있다면 pass로 focus가 가도록 했고, alert 창을 띄었습니다.
  • 마찬가지로 pass값을 입력하지 않는다면 form이 제출되지 않습니다.
for (var i = 0; i <= document.memberJoin.age.value.length; i++)
{      /* charAt(i) : 아스카 코드 값 */
	if (document.memberJoin.age.value == "" &&
            (document.memberJoin.age.value.charAt(i) < "0" || 
             document.memberJoin.age.value.charAt(i) > "9"))
      /* 값이 비어있거나, 입력된 나이가 0보다 작거나 9보다 크면, 
      즉 0에서 9사이만 입력 받겠다. */
	{
        	alert("나이는 숫자만 가능합니다. ");
         	document.memberJoin.age.focus();
         	return;
	}
}
  • 아스키코드를 이용해 숫자가 아니면 age에 focus가 가도록 했고, alert 창을 띄었습니다.
  • 마찬가지로 age값을 입력하지 않는다면 form이 제출되지 않습니다.
document.memberJoin.submit();  // 유효성 검사 통과면 action 페이지로
  • 만약 유효성 검사 통과에 성공했다면, action 페이지로 이동합니다.

3. input radio 선택 확인 📒

function valid_check() 
{ 
	if( (frm.post[0].checked == false) && 
    		(frm.post[1].checked == false)) 
    { 
    	alert("우편물 수령 장소를 선택해 주십시오."); 
    	return false; 
    } 
}
  • post의 값을 배열로 가져와서 checked 여부를 확인하고, alert 창을 띄웠습니다.
  • 집 혹은 회사를 선택하지 않으면 form이 제출되지 않습니다.

4. input checkbox 선택 확인 📗

function valid_check() 
{ 
	if(frm.confirm.checked != true)
    { 
    	alert("개인정보 수집에 동의해 주세요."); 
    	frm.confirm.focus(); 
		return false; 
    } 
}
  • confirm을 선택했는지 checked 여부를 확인하고, alert 창을 띄웠습니다.
  • 개인정보 수집에 체크하지 않으면 form이 제출되지 않습니다.

5. 창 제어 window.open 📘

function check_id()
  {
	 var JSPName = "id_check.jsp";
	 browsing_window = window.open(JSPName, "idcheck", "height=220, width=420");
	 browsing_window.focus();
  }
window.open설명
widow.open('demo2.html');새로운 창에서 열림
widow.open('demo2.html', '_self');자기 창(현재 창)에서 열림
widow.open('demo2.html', '_blank');새로운 창에서 열림
widow.open('demo2.html', 'ot');창에 이름을 붙이면서 생성함
window.open('demo2.html', "ot", "height=220, width=420");열리는 창의 크기와 높이를 조정할 수 있음
profile
삽질의 기록들🐥

0개의 댓글