자료 입력 테스트
- input에 입력된 자료가 기준과 부합되지 않으면 오른쪽에 오류메시지 출력.
input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="input.css" type="text/css"/>
<script type="text/javascript" src="input.js"></script>
</head>
<body>
<h2>** 자료 입력 **</h2>
<form id="signup" method="post">
<label for="userid" class="label">ID 입력:</label><input type="text" name="userid" value="" id="userid"/>
<span class="msg" id="id_error">id 를 채우시오</span>
<br/>
<label for="age" class="label">나이입력:</label><input type="text" name="age" id="age"/>
<span class="msg" id="age_error1">나이를 채우시오</span>
<span class="msg" id="age_error2">나이는 숫자만 허용</span>
<br/>
<label for="pwd1" class="label">비밀번호:</label><input type="password" name="pwd1" id="pwd1"/>
<span class="msg" id="p_error1">비밀번호를 입력하시오</span>
<br/>
<label for="pwd2" class="label">비밀번호 재입력:</label><input type="password" name="pwd2" id="pwd2"/>
<span class="msg" id="p_error2">비밀번호 불일치</span>
<br/>
<button type="button" id="btnSend">전송</button>
</form>
</body>
</html>
input.css
.label {
float: left;
width: 140px;
text-align: left;
}
#userid, #age, #pwd1, #pwd2 {
width: 200px;
}
#btnSend {
width: 100px;
margin-top: 1.1em;
margin-left: 150px;
}
.msg {
color: red;
padding-left: 2px;
}
input.js
$(document).ready(function() {
$("#id_error").hide();
$("#age_error1").hide();
$("#age_error2").hide();
$("#p_error1").hide();
$("#p_error2").hide();
$("button#btnSend").click(function() {
//id 검사
var id = $('#userid').val();
if (id.length < 1){
$("#id_error").show();
return false;
} else {
$("#id_error").hide();
}
//age 검사
var age = $("#age").val();
if (age.length < 1){
$("#age_error1").show();
return false;
} else {
$("#age_error1").hide();
}
//숫자 입력 체크
for(var i=0; i<age.length i="i" var="" data="" alert="alert" if=""><="" 48="" ||=""> 57){
$("#age_error2").show();
return false;
} else {
$("#age_error2").hide();
}
}
//비밀번호 체크
var pwd1 = $("#pwd1").val();
if (pwd1.length < 1){
$("#pwd1").next().show();
return false;
} else {
$("#pwd1").next().hide();
}
var pwd2 = $("#pwd2").val();
if (pwd1 != pwd2){
$("#pwd2").next().show();
return false;
} else {
$("#pwd2").next().hide();
}
$("#signup").attr('action','inputproc.jsp').submit();
return true;
});
});
inputproc.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String id=request.getParameter("userid");
String age=request.getParameter("age");
String pwd=request.getParameter("pwd1");
%>
<h3>
ID : <%=id %><br/>
Age : <%=age %><br/>
Password : <%=pwd %>
</h3>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [jQueryMobile] jQueryMobile 참고 url (0) | 2019.05.27 |
|---|---|
| [HTML5/CSS3/JQUERY] jquery, ajax, oracle, xml 을 이용한 view (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] meter : 문자 입력 수에 따른 progress example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] image : 이미지 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] table : 테이블 example (0) | 2019.05.27 |
