HTML / Javascript 유효성 검사
웹표준 기술을 이용해서 아래의 조건에 맞는 양식을 만들고 유효성 검사를 하시오
1) 값 전달 방식은 post 방식으로 하고, action은 gugu.jsp 로 하시오.
2) 제목 : 보고 싶은 구구단은?
3) select 태그를 이용하여 2 ~ 9중에서 선택할 수 있도록 작성하시오.
4) 확인 버튼의 type은 submit로 설정 하시오.
5) 구구단을 선택하지 않고 확인버튼 눌렀을 때 유효성검사를 하시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 유효성 검사
function check(){
var dan = document.getElementById("dan");
if(dan.value == ""){
alert("구구단을 선택하세요.");
dan.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="gugu.jsp" onSubmit="return check()">
<h1>보고싶은 구구단은 ?</h1>
<select id="dan" name="dan" style="width:100px">
<option value="">선택안함</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br><br>
<input type="submit" value="확인">
</form>
</body>
</html>
JSP 태그 / 값 전달받기
위 1번 문제 양식에서 선택한 구구단을 아래와 같이 출력하는 파일을 작성하시오
1) 앞의 문제에서 선택한 구구단을 받아서 아래와 같이 출력 하시오.
2) 출력 파일은 gugu.jsp 파일로 작성하시오.
3) 제목(구구단 7단)의 한글값이 깨지지 않도록 처리하시오.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int dan = Integer.parseInt(request.getParameter("dan"));
%>
<h1>구구단 <%=dan %>단 </h1>
<%
for(int i = 1; i < 10 ; i ++) {
out.println(dan + " * " + i + " = " + dan * i + "<br>");
}
%>
Javascript 유효성 검사
웹표준 기술을 이용해서 아래의 조건에 맞는 양식을 만들고 유효성 검사를 하시오
1) 값 전달 방식은 post 방식으로 한다.
2) 입력 양식의 id는 위에서부터 myid, mypasswd로 각각 설정한다.
3) 로그인 버튼의 type은 submit으로 하고, 취소 버튼은 reset으로 설정한다.
4) 로그인 버튼 눌렀을 때 유효성검사를 하시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
<script>
function check(){
var myid = document.getElementById("myid");
var mypasswd = document.getElementById("mypasswd");
if(myid.value == ""){
alert("ID를 입력 하세요.");
myid.focus();
return false;
}
if(mypasswd.value == ""){
alert("비밀번호를 입력하세요.");
mypasswd.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="login.jsp" onSubmit="return check()">
<table border=1 width=350 align=center>
<caption>로그인</caption>
<tr><td>ID</td>
<td><input type=text size=20
maxlength=10
autofocus="autofocus"
name="myid"
id="myid">
</td>
</tr>
<tr><td>비밀번호</td>
<td><input type=password size=20
name="mypasswd"
id="mypasswd">
</td>
</tr>
<tr><td colspan=2 align=center>
<input type=submit value="로그인">
<input type=reset value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript 유효성 검사
웹표준 기술을 이용해서 아래의 조건에 맞는 양식을 만들고 유효성 검사를 하시오
1) 값 전달 방식은 post 방식으로 한다.
2) 입력 양식의 id는 위에서부터 title, name, mypasswd, mycontent로 각각 설정한다.
3) 확인 버튼의 type은 submit으로 설정한다.
4) 확인 버튼 눌렀을 때 유효성검사를 하시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<script>
function check(){
var title = document.getElementById("title");
var name = document.getElementById("name");
var mypasswd = document.getElementById("mypasswd");
var mycontent = document.getElementById("mycontent");
if(title.value == ""){
alert("제목을 입력 하세요.");
title.focus();
return false;
}
if(name.value == ""){
alert("작성자를 입력 하세요.");
name.focus();
return false;
}
if(mypasswd.value == ""){
alert("비밀번호를 입력 하세요.");
mypasswd.focus();
return false;
}
if(mycontent.value == ""){
alert("내용을 입력 하세요.");
mycontent.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="board.jsp" onSubmit="return check()">
<table border=1 width=500 align=center>
<caption>게시판</caption>
<tr>
<th>제목</th>
<td><input type=text size=20 name="title"
id="title">
</td>
</tr>
<tr>
<th>작성자</th>
<td><input type=text size=20 name="name"
id="name">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password name="mypasswd"
id="mypasswd">
</td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50" name="mycontent"
id="mycontent"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="확인">
</td>
</tr>
</table>
</form>
</body>
</html>
Javascript 유효성 검사
웹표준 기술을 이용해서 아래의 조건에 맞는 양식을 만들고 유효성 검사를 하시오
1) 값 전달 방식은 post 방식으로 한다.
2) ID중복검사 버튼의 type은 button을 작성한다.
3) 핸드폰 번호 앞자리는 반드시 선택하도록 유효성 검사를 하시오.
4) 성별도 남자, 여자 중에서 1개를 선택하도록 유효성 검사를 하시오.
5) 취미는 반드시 2개 이상 선택 하도록 유효성 검사를 하시오.
6) 자기소개는 100자 이내로 입력 하도록 유효성 검사를 하시오.
7) 회원가입 버튼의 type은 submit으로 작성하시오.
8) 입력 및 선택 양식에 대해서 모두 유효성 검사를 하시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
<script>
// 유효성 검사
function check(){
var id = document.getElementById("id");
var passwd = document.getElementById("passwd");
var name = document.getElementById("name");
var mailid = document.getElementById("mailid");
var domain = document.getElementById("domain");
var phone1 = document.getElementById("phone1");
var phone2 = document.getElementById("phone2");
var phone3 = document.getElementById("phone3");
var male = document.getElementById("male");
var female = document.getElementById("female");
var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");
var h3 = document.getElementById("h3");
var h4 = document.getElementById("h4");
var h5 = document.getElementById("h5");
var intro = document.getElementById("intro");
if(id.value == ""){
alert("ID를 입력 하세요.");
id.focus();
return false;
}
if(passwd.value == ""){
alert("비밀번호를 입력 하세요.");
passwd.focus();
return false;
}
if(name.value == ""){
alert("성명을 입력 하세요.");
name.focus();
return false;
}
if(mailid.value == ""){
alert("EMail주소를 입력 하세요.");
mailid.focus();
return false;
}
if(domain.value == ""){
alert("도메인을 입력 하세요.");
domain.focus();
return false;
}
if(phone1.value == ""){
alert("핸드폰 앞자리를 입력 하세요.");
phone1.focus();
return false;
}
if(phone2.value == ""){
alert("핸드폰 중간자리를 입력 하세요.");
phone2.focus();
return false;
}
if(isNaN(phone2.value)){
alert("숫자만 입력 하세요.");
phone2.value = "";
phone2.focus();
return false;
}
if(phone3.value == ""){
alert("핸드폰 끝자리를 입력 하세요.");
phone3.focus();
return false;
}
if(isNaN(phone3.value)){
alert("숫자만 입력 하세요.");
phone3.value = "";
phone3.focus();
return false;
}
if(male.checked == false && female.checked == false){
alert("성별을 선택 하세요.");
return false;
}
var cnt = 0;
if(h1.checked) cnt++;
if(h2.checked) cnt++;
if(h3.checked) cnt++;
if(h4.checked) cnt++;
if(h5.checked) cnt++;
if(cnt < 2){
alert("취미를 2개 이상 선택 하세요.");
return false;
}
if(intro.value == ""){
alert("자기소개를 입력 하세요.");
intro.focus();
return false;
}
if(intro.value.length > 100){
alert("자기소개를 100자 까지 입력 하세요.");
intro.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="member.jsp" onSubmit="return check()">
<table border=1 width=600 align=center>
<caption>회원 가입폼</caption>
<tr>
<th>ID</th>
<td><input type=text name="id" id="id" autofocus="autofocus">
<input type="button" value="ID중복검사">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password name="passwd" id="passwd"></td>
</tr>
<tr>
<th>성명</th>
<td><input type=text name="name" id="name"></td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type=text size=10 name="mailid" id="mailid">@
<input type=text size=15 name="domain" id="domain">
<select id="email" onChange="sel()">
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="nate.com">네이트</option>
<option value="gmail.com">구글</option>
</select>
</td>
</tr>
<tr>
<th>핸드폰</th>
<td><select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
<input type=text size=4 maxlength=4 name="phone2" id="phone2">-
<input type=text size=4 maxlength=4 name="phone3" id="phone3">
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" id="male" name="gender" value="남자">남자
<input type="radio" id="female" name="gender" value="여자">여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" id="h1" name="hobby" value="공부">공부
<input type="checkbox" id="h2" name="hobby" value="등산">등산
<input type="checkbox" id="h3" name="hobby" value="게임">게임
<input type="checkbox" id="h4" name="hobby" value="낚시">낚시
<input type="checkbox" id="h5" name="hobby" value="쇼핑">쇼핑
</td>
</tr>
<tr>
<th>자기소개</th>
<td><textarea rows="5" cols="70"
name="intro" id="intro"
placeholder="자기소개를 100자 이내로 입력하세요"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
점수
100 / 100
'만들어보기' 카테고리의 다른 글
| 프레임워크 프로그래밍 코딩 연습 / 여덟 번째 시험문제 (0) | 2022.10.20 |
|---|---|
| 웹 서버 프로그램 코딩 연습 / 일곱 번째 시험문제 (0) | 2022.09.28 |
| PL/SQL 코딩 연습 / 다섯 번째 시험문제 (0) | 2022.08.08 |
| SQL 코딩 연습 / 네번째 시험문제 (0) | 2022.08.03 |
| SQL 코딩 연습 / 세번째 시험문제 (0) | 2022.08.02 |
