기록
JSP 유효성검사 (validation) 1 본문
유효성검사 (validation)
- 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는것
- 사용자가 실수로 유효하지 않은 데이터 값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려줌.
1) 기본 유효성검사
입력된 데이터값의 존재 유무를 검사(입력했냐 안했냐)
ex) 필수입력체크
2) 데이터 형식 유효성검사
사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이
특정 패턴에 적합한지 검사하기 위해 정규 표현식(reqular expression)을 사용.
ex) 주민번호, 전화번호, 나이(숫자)
1. Flag : /정규표현식/ 끝에 사용하며 생략 가능
( I aM falG)
- i(Ignore Case) : 대소문자 구별 없음.
- m(Multi Line) : 줄 바꿈 있니?
- g(Global) : 모든 패턴 검출
2. 메소드
- test() : 정규표현식.test(대상문자열) true/false 리턴 *****
- exec() : 정규표현식.exec(대상문자열) 패턴에 맞는 문자열 추출
유효성 검사를 위한 핸들러 함수 예시
일단 입력한 id와 pw를 콘솔에 출력해보기
<!-- 폼페이지 -->
<form name="loginForm">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="text" name="passwd" /></p>
<!-- checkForm() : 핸들러 함수 -->
<p><input type="button" value="전송" onclick="checkForm()"/></p>
</form><script type="text/javascript">
function checkForm() {
//아이디 값
let id = document.loginForm.id.value;
let passwd = document.loginForm.passwd.value;
console.log("아이디:"+id+"비밀번호:"+passwd)
}
</script>
자바스크립트 아이디, 비밀번호 기본 유효성 검사
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>validation</title>
<script type="text/javascript">
자바스크립트 버전
function checkLogin(){
//폼 페이지를 JS 객체로 할당
let form = document.loginForm;
if(form.id.value==""){ //아이디 값이 없으면
alert("아이디를 입력해주세요")
form.id.focus();
return false; //함수를 종료
}else if(form.passwd.value==""){ //비밀번호 값이 없으면
alert("비밀번호를 입력해주세요");
form.passwd.focus();
return false;
}
form.submit();
}
</script>
</head>
<body>
<!-- 기본 유효성 검사
- 입력한 데이터 값이 있니? 없니?
- 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사
-->
<form name="loginForm" action="validation02_process.jsp"
method="post" id="loginForm">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="text" name="passwd" class="cls passwd"/></p>
<!-- checkForm() : 핸들러 함수 -->
<p><input type="button" value="전송" onclick="checkLogin()"/></p>
</form>
</body>
</html>
제이쿼리 아이디, 비밀번호 유효성 검사
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<title>validation</title>
<script type="text/javascript">
$(function(){
$("input[type='button']").on('click',function(){
//아이디 입력란의 값의 값을 가져옴
let id = $("input[name='id']").val();
let passwd = $(".passwd").val();
console.log("id :"+id+", passwd : "+ passwd);
if(id==""){
alert("아이디를 입력해주세요");
}else if(passwd==""){
alert("비밀번호를 입력해주세요");
}else{
alert("정상입력");
$('#loginForm').submit();
}
});
});
</script>
</head>
<body>
<!-- 기본 유효성 검사
- 입력한 데이터 값이 있니? 없니?
- 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사
-->
<form name="loginForm" action="validation02_process.jsp"
method="post" id="loginForm">
<p>아이디 : <input type="text" name="id" /></p>
<p>비밀번호 : <input type="text" name="passwd" class="cls passwd"/></p>
<!-- checkForm() : 핸들러 함수 -->
<p><input type="button" value="전송" "/></p> -->
</form>
</body>
</html>
유효성 검사에 어긋날시
유효성 검사 성공시
처리페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
</head>
<body>
<h3>입력에 성공했습니다.</h3>
<% //스크립틀릿
//validation02_process.jsp?id=a001&passwd=java
//단 post는 가려서 옴
//요청(http) 파라미터(QueryString) : id=a001&passwd=java
//한글처리
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id"); //a001
String passwd = request.getParameter("passwd");
%>
<p>아이디 : <%= id%></p>
<p>비밀번호 : <%=passwd%></p>
</body>
</html>
'JSP' 카테고리의 다른 글
| JSP 유효성검사 (validation) 3 영문소문자, 숫자 유효성검사 (0) | 2023.01.06 |
|---|---|
| JSP 유효성검사 (validation) 2 글자수 유효성 검사 (0) | 2023.01.06 |
| JSP 상품등록 + 파일업로드 추가5 (0) | 2023.01.05 |
| JSP 상품 등록 후 자동 새로고침 설정 (0) | 2023.01.05 |
| JSP 파일업로드 4 (숙제) (2) | 2023.01.04 |
'JSP' Related Articles
more
Comments