[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기3
- 정보처리산업기사 과정평가형/실기
- 2021. 4. 10.
이제 DB를 다루는 부분이 끝났으므로, 유효성 검사부분을 하도록 하겠습니다.
여기부분에 대해서는 별도로 다른 방법을 제시하였습니다.
이유는, 예제에서 주어진 유효성 검사는 빈칸에 대한 유효성 검사를 제시하였지만
실제 시험에서는 빈칸뿐만 아닌 SELECT, CHECKBOX, RADIO 까지 주어진 경우가 있었습니다.
따라서 이부분은 별도의 시간을 갖도록 하였으며
예제에 대한 코드는 이를 활용하여 만들어보시는 것을 추천드립니다.
마지막 결과 코드는 제일 마지막 게시글에 올렸으므로, 참고하시면 감사하겠습니다.
유효성 검사 테스트
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="join">
<h3>input 유효성 검사하기</h3>
1. text<br>
<input type="text" id="t1" name="t1"><br>
2. select < 선택 안함 : 없음 ><br>
<select name='t2'>
<option value="0">없음</option>
<option value="1">가</option>
<option value="2">나</option>
<option value="3">다</option>
</select><br>
3. checkbox<br>
<input type="checkbox" name="chk" value="a">a 방법
<input type="checkbox" name="chk" value="b">b 방법
<input type="checkbox" name="chk" value="c">c 방법
<br>
4. radio<br>
<input type="radio" name="rao" value="m">남성
<input type="radio" name="rao" value="w">여성<br>
<input type="button" value="유효성 검사" onclick='test()'>
</form>
</body>
</html>유효성 검사하기 위해 가장 대표적인 케이스로 작성하였으며, 각 부분에 대해 입력 혹은 선택 안했을 경우 유효성 검사를 할 수 있도록 만들 수 있어야 합니다.
방법은 여러가지가 있으며, 이 중 한가지의 방법일 뿐입니다.
유효성 검사는 차후 반드시 필요한 부분이기 때문에 숙지하셔야 하며,
이번 시험에서도 어떤 방식으로 출제될지 모르기 때문에 알아두시면 도움이 될거라 믿습니다.
유효성 검사하기 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script language="javascript">
//유효성 검사 버튼을 눌렀을 경우 실행되는 function이다.
function test()
{
//1번의 유효성 검사를 확인한다.
var value = document.join.t1.value;
if(value == "")
{
alert('1번 입력창을 입력해주세요.');
document.join.t1.focus();
return false;
}
//2번의 유효성 검사를 확인한다.
if(document.join.t2.value == "0")
{
alert('2번을 선택해주세요.');
return false;
}
//3번의 유효성 검사를 확인한다.
var cnt = 0;
//체크박스는 chk로 묶여있기 때문에 chk를 불러온다.
var chk = document.getElementsByName("chk");
//하나라도 체크박스가 체크되어있는지 확인한다.
for(var i =0; i <chk.length; i++)
{
if(chk[i].checked == true)
{
cnt++;
break;
}
}
if(cnt == 0)
{
alert('3번을 체크해주세요.');
return false;
}
//4번의 유효성 검사를 확인한다.
cnt = 0;
var rao = document.getElementsByName("rao");
for(var i =0; i< rao.length; i++)
{
if(rao[i].checked == true)
{
cnt++;
break;
}
}
if(cnt == 0)
{
alert('4번을 체크해주세요.');
return false;
}
alert('유효성 테스트 성공');
//4개의 유효성 검사를 완료 할 경우
//submit 하기
//document.join.submit();
}
</script>
</head>
<body>
<form name="join">
<h3>input 유효성 검사하기</h3>
1. text<br>
<input type="text" id="t1" name="t1"><br>
2. select < 선택 안함 : 없음 ><br>
<select name='t2'>
<option value="0">없음</option>
<option value="1">가</option>
<option value="2">나</option>
<option value="3">다</option>
</select><br>
3. checkbox<br>
<input type="checkbox" name="chk" value="a">a 방법
<input type="checkbox" name="chk" value="b">b 방법
<input type="checkbox" name="chk" value="c">c 방법
<br>
4. radio<br>
<input type="radio" name="rao" value="m">남성
<input type="radio" name="rao" value="w">여성<br>
<input type="button" value="유효성 검사" onclick='test()'>
</form>
</body>
</html>
전체 목록
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기2
[정보처리산업기사 과정평가형 - 실기] 회원가입 만들기3
[정보처리산업기사 과정평가형 - 실기] 회원 목록 만들기
[정보처리산업기사 과정평가형 - 실기] 회원 정보 가져오기
[정보처리산업기사 과정평가형 - 실기] 회원 정보 수정하기
반응형
'정보처리산업기사 과정평가형 > 실기' 카테고리의 다른 글
| [정보처리산업기사 과정평가형 - 실기] 회원 정보 가져오기 (0) | 2021.04.10 |
|---|---|
| [정보처리산업기사 과정평가형 - 실기] 회원 목록 만들기 (0) | 2021.04.10 |
| [정보처리산업기사 과정평가형 - 실기] 회원가입 만들기2 (1) | 2021.04.10 |
| [정보처리산업기사 과정평가형 - 실기] 회원가입 만들기 (13) | 2021.04.10 |
| [정보처리산업기사 과정평가형 - 실기] DAO 만들기 (0) | 2020.08.29 |