자바스크립트에서 무언가 데이터들을 전송할 때 활용하는 폼 태그와 부트 스트랩을 같이 사용해서 기본적인 개인정보를 입력해 전송하는 간단한 화면을 만들어보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
window.onload = () =>{
document.querySelector("#btnSend").onclick = chkData;
document.querySelector("#btnClear").onclick = clsData;
}
function chkData(e){
e.preventDefault(); // submit 기능을 정지
//alert("a");
// 입력자료 오류 검사
if(frm.name.value === "" || isNaN(frm.name.value) === false){
frm.name.focus();
alert("이름을 입력하세요");
return;
}
if(frm.id.value.length < 3){
frm.id.focus();
alert("id는 3자 이상 입력하세요.")
return;
}
// 정규 표현식 - 입력 자료 검사용
let str = "123ABC가나다45홍 asdf1 23길동";
console.log(str.match(/[1]/)); // 반환값은 배열, 최초의 1개만 반환
console.log(str.match(/[1]/g)); // 해당되는 모든 값 반환
console.log(str.match(/[0-9]/g)); // 숫자만
console.log(str.match(/\d/g)); // 위와 동일
console.log(str.match(/[0-9 ]/g)); // 숫자, 공백
console.log(str.match(/[가나]/g));
console.log(str.match(/[가-힣]/g)); // 한글만
console.log(str.match(/[a-zA-Z0-9]/g)); // 한글과 공백만 빠짐
console.log(str.match(/[a-zA-Z0-9]/gi)); // i : 대소문자 구분 안함
console.log(str.match(/[가-힣]+/g)); // 한글(새로운 문자가 나오기 전까지)
console.log(str.match(/\d{2}/g)); // 숫자 연속2자만
console.log(str.match(/\d{2,3}/g)); // 숫자 연속2 또는 3
// -----------------------------------
// 이메일 검사
let regExp = /^[0-9a-zA-Z][-_\.]?[0-9a-zA-Z]*@[0-9a-zA-Z]+([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
if(!frm.email.value.match(regExp)){
frm.email.focus();
alert("이메일을 정확히 입력하세요");
return;
}
// 나이 검사
let regExp2 = /^[0-9]{1,2}$/;
if(!frm.age.value.match(regExp2)){
frm.age.focus();
alert("나이는 숫자만 입력하세요");
return;
}
frm.action = "js17form.jsp";
frm.method = "post";
frm.submit();
}
function clsData(){ // reset + 추가 기능
alert("b");
//frm.name.focus();
document.querySelector("#name").focus(); // 위와 결과 동일
}
</script>
</head>
<body>
** 개인자료 입력 **<br>
<!--
<form action="js17form.jsp" name="frm" method="post">
-->
<form name="frm">
<table class="table">
<tr>
<td>이 름</td>
<td><input type="text" name="name" id="name" value="홍길동"></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" name="id" placeholder="3자 이상"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>나 이</td>
<td><input type="text" name="age" maxlength="2"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input type="submit" id="btnSend" value="자료 전송" class="btn btn-dark">
<input type="reset" id="btnClear" value="자료 삭제" class="btn btn-link">
</td>
</tr>
</table>
</form>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
대화상자
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 자바 영역
request.setCharacterEncoding("utf-8");
String irum = request.getParameter("name");
String id = request.getParameter("id");
// 수신된 자료를 자바에서 표준 출력장치로 출력
System.out.println(irum + " " + id);
String email = request.getParameter("email");
String nai = request.getParameter("age");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log(`자바스크립트 표준 출력 장치로 출력<%=irum%>`);
</script>
</head>
<body>
이름은 <%=irum%> 아이디는 <%=id%> 이메일은 <%=email%> 나이는 <%=nai%>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 자바스크립트 돔(DOM) (1) | 2024.07.24 |
|---|---|
| 자바스크립트 이벤트(javascript event) (4) | 2024.07.24 |
| 자바스크립트 함수(Arrow 함수, 재귀함수) (1) | 2024.07.24 |
| 자바스크립트 배열과 함수 (2) | 2024.07.24 |
| 자바스크립트 문법 배우기 (1) | 2024.07.24 |