JSP 유효성 검사/ 정규 표현식

별의개발자커비·2023년 4월 29일

JSP

목록 보기

11/31

1. 기본 유효성 검사

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>1. validation</title>
</head>
<body>
	<form action="process_validation01.jsp" name="loginForm" method="post">
		<p>id: <input type="text" name="id">
		<p>psw: <input type="password" name="psw">
		<p><input type="submit" value="로그인" onclick=" checkform(event)">
	</form>
</body>

<script type="text/javascript">
	const $loginForm = document.loginForm;
	function checkform(event) {
		event.preventDefault();
		let $id = $loginForm.id; // name이 id인 애
		if( $id.value.length <6 || $id.value.length >12){
			alert("아이디는 6자리 이상 12자리 이하로 설정해 주세요");
			$id.select();
			return false;
		}
		let $psw = $loginForm.psw ;
		if( $psw.value === ""){
			alert("패스워드를 입력하세요");
			$psw.select();
			return false;
		}
		$loginForm.submit();
	}
</script>


</html>

event.preventDefault() 로 새로고침 막기
각 if문에 return false해서 뒤 진행 못하게 막기
마지막까지 잘 왔다면 submit되게 하기
근데 id가 아니라 name으로도 지정이 되네

<form action="process_validation01.jsp" name="loginForm" method="post">
		<p>id: <input type="text" name="id">
		<p>psw: <input type="password" name="psw">
		<p><input type="submit" value="로그인" onclick=" checkform(event)">
	</form>

위에서 name id를 이렇게 데려올 수 있음

let $id = $loginForm.id; // name이 id인 애

2. 정규 표현식 Regular Expression

문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단입니다.

: text, esec 등

01. RegExp.exec(), RegExp.test()

//정규표현식 리터럴
var pattern = /a/

RegExp.exec() => 필요한 정보(문자)를 추출하는데 목적

// RegExp.exec() => 필요한 정보(문자)를 추출하는데 목적
pattern.exec('abcdef'); // ["a"]
// 실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.

pattern.exec('bcdefg'); // null
// 인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

egExp.test() => 패턴이 있는지 없는지를 테스트하는데 목적

// RegExp.test() => 패턴이 있는지 없는지를 테스트하는데 목적
// test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
pattern.test('abcdef'); // true
pattern.test('bcdefg'); // false

02. 정규식 플래그

정규표현식 패턴을 만들 때 옵션을 설정할 수 있습니다. 옵션에 따라서 검출되는 데이터가 달라집니다.

var xi = /a/;
"Abcde".match(xi); // null
var oi = /a/i;
"Abcde".match(oi); // ["A"];

var xg = /a/;
"abcdea".match(xg);
var og = /a/g;
"abcdea".match(og);

03. 정규식 패턴 기호 모음

1) 정규식 특정 문자 숫자 매칭 패턴

2) 정규식 검색 기준 패턴

3) 정규식 갯수 반복 패턴

4) 기타 패턴

04. select(), focus()

회원가입 시 아이디, 비밀번호, 이메일 등을 검증하여 잘못된 부분을 사용자에게 수정요청할 때 alert과 함께 focus를 해주는 경우가 있다.

focus(): 해당 입력폼의 커서를 가져다 줌

select(): focus 받은 해당 입력폼의 value값이 블록이 씌워져 보다 용이한 수정 가능

//Email 폼에 focus가 가면 기존 내용이 블록에 싸이고 기본 언어 영어 설정

<input type="text" id="userEmail" style="ime-mode:active;" onfocus="this.select()">

3. 학원예제

1) 정규식 예제1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규식</title>

<script type="text/javascript">
	let regExp = /Java/i;
	let str = 'Java Server Page';
	let result = regExp.exec(str); // 결과를 반환
	let resultTest = regExp.test(str) // 매칭되는게 있으면 true 그렇지 않으면 false
	alert(result + '\n' + resultTest);
</script>

</head>
<body>

</body>
</html>

2) 정규식 예제2: 정규식 주요표현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규식 주요 표현</title>
</head>
<body>

<div>
	<img alt="" src="./resources/images/regExp01.PNG">
</div>

<div>
	<img alt="" src="./resources/images/regExp02.PNG">
</div>

<style>
.sample{
	position: absolute;
	top: 50%;
	left: 50%;	
}
</style>

<div class = 'sample'>
	<h1>한글및 알파벳만 사용하도록 검사(정규식 이용)</h1>
	<input type="text" name="username" id='username'>
	<input type="button" value="검사" id='checkbutton'>
	</body>
</div>

<script type="text/javascript">
	const $checkbutton = document.querySelector('#checkbutton');
	const check = ()=>{
		const $username = document.querySelector('#username');
		let regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅓ|가-힣]/; 
		if (!regExp.test($username.value)){
			alert('숫자로 시작할 수 없습니다.');
			$username.select();
		}	
		
	};
	$checkbutton.addEventListener('click',check);
</script>
</html>

3) 정규식 적용: validation.js

/**
 * 
 */

 checkAddProduction = (event) =>{
	 event.preventDefault();
	 const $productId =  document.querySelector('#productId');
	 const $name =  document.querySelector('#name');
	 const $unitPrice =  document.querySelector('#unitPrice');
	 const $unitsInStock =  document.querySelector('#unitsInStock');
	 
	 // 상품 아이디 체크
	 if(!check(/^P[0-9]{4,11}$/, $productId , "[상품코드]\nP와 숫자를 조합해서 5~12자리까지 입력하세요\n첫 글자는 P로 시작해야 합니다.")){
		 return false;
	}
	// 상품명 체크
	if($name.value.length< 4 || $name.value.length>12 ){
		alert("[상품명]\n최소 4자에서 최대 12자까지 입력하세요");
		$name.select();
		$name.focus();
		return false;
	}	 
	// 상품 가격 체크
	if($unitPrice.value.length === 0 || isNaN($unitPrice.value)){
		alert('[가격]\n숫자만 입력하세요');
		$unitPrice.select();
		$unitPrice.focus();
		return false;
	} else if($unitPrice.value<0){
		alert('[가격]\n 음수는 입력할 수 없습니다.');
		$unitPrice.select();
		$unitPrice.focus();
		return false;
	}
	// 재고수
		if($unitsInStock.value.length === 0 || isNaN($unitsInStock.value)){
		alert('[재고수]\n숫자만 입력하세요');
		$unitsInStock.select();
		$unitsInStock.focus();
		return false;
	} else if($unitsInStock.value<0){
		alert('[재고수]\n 음수는 입력할 수 없습니다.');
		$unitsInStock.select();
		$unitsInStock.focus();
		return false;
	}
	document.newProduct.submit();
	
 };

 
/** 
* regExp: 정규 표현식
* e : 검사할 객체
* msg: 경고뮨
*/
 check = (regExp, e, msg ) =>{
	 if(regExp.test(e.value)){
		 return true;
	 }
	 alert(msg);
	 e.select();
	 e.focus();
	 return false;
	 
 }

isNaN($unitPrice.value) 으로 숫자인지 확인하기
check() 정규식 확인 함수: 만들어서 적용하기

 check = (regExp, e, msg) => {
	 if(regExp.test(e.value)){
		 return true;
	 }
	 alert(msg);
	 e.select();
	 e.focus();
	 return false;
 }

적용 형태

if( !check(/^P[0,9]{4,11}$/, $prodoctId, "[상품코드]\nP와 숫자를 조합해서 5~12자리 수를 입력하세요")  ){
		return false;
	}

/^P: P로 시작하고
[0,9]: 0~9 숫자 중에
{4,11}: 4~11자리 길이
$/: 그 문자열로 끝남

새로 세팅

워크스페이스 새로 만들기
0429 다운 받아서 import 하고
원래 거에서 꺼내서 넣고 원래 껍데기는 지우기

java 20으로, tomcat 8.5 , 다른 거 3.1

( 출처 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC#%EC%A0%95%EA%B7%9C%EC%8B%9D_%ED%94%8C%EB%9E%98%EA%B7%B8)

별의개발자커비

비전공자 독학러. 일단 쌔린다. 개발 공부👊

이전 포스트

JSP 쇼핑몰 페이지 만들기 3 (상품등록 - 파일 기능 추가)

다음 포스트