[JavaScript] 2021.01.18. DAY_58 유효성검사
2021. 1. 18. 15:44ㆍWeb_Front-end/JavaScript
JavaScript + JSP 로 유효성검사 (숫자인 값만 JSP파일로 보내는 연습)
▼JavaScript로 숫자만 JSP파일로 넘어가게 유효성검사 해보기▼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형변환연습 - 유효성검사</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btnOK").onclick = function(){
var age = document.getElementById("age").value;
/* isNaN(값) : 값이 숫자가 아닌가? */
if(isNaN(age)){
alert("나이는 숫자로 입력해주세요");
return;
}
/* server로 제출하는 method : submit() */
document.getElementById("fr").submit();
}
}
</script>
</head>
<body>
<form id="fr" action="joinOK.jsp" method="post">
이름 : <input type="text" name="name"/><br>
<!-- JSP로 넘어가는 값은 name, Script처리는 id -->
나이 : <input type="text" id="age" name="age"/><br>
<input type="button" id="btnOK" value="확인"/><br>
</form>
</body>
</html>▼JSP파일▼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
%>
이름 : <%=name %><br>
나이 : <%=age %>
</body>
</html>
input type을 text가 아닌, number로 작성하면
브라우저마다 다른 형식으로 유효성검사를 자동으로 해준다.
▼JavaScript에서 따로 유효성검사처리를 하지 않고, input type을 number로 변경해서 검사하기▼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형변환연습 - 유효성검사</title>
</head>
<body>
<form id="fr" action="joinOK.jsp" method="post">
이름 : <input type="text" name="name"/><br>
<!-- JSP로 넘어가는 값은 name, Script처리는 id -->
나이 : <input type="number" id="age" name="age"/><br>
<input type="submit" value="확인"/><br>
</form>
</body>
</html>
'Web_Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 2021.01.18. DAY_58 조건문_ Boolean(), || 연산 등 (0) | 2021.01.18 |
|---|---|
| [JavaScript] 2021.01.18. DAY_58 template String (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 자동형변환, ===연산, const(상수) (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 JavaScript의 기능, 연산, 문자열, 표현식 (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 window.onload window창이 모두 열리고 나서 동작하게하는 방법 (0) | 2021.01.18 |