* 유효성 검사
- 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게
입력되었는지 검증하는 것
ex) 나이를 적을 때 숫자를 입력하였는지, 아이디 중복 검사, 비밀번호 확인 ....등
* 핸들러 함수
폼페이지에서 이벤트 발생(submit 클릭 한 경우)시 유효성 검사를 위해 매핑하는 메서드
<input type="button" onclick="핸들러함수">
* 정규 표현식
- 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어
-정규 표현식의 사용 형식
var 변수 이름 = /정규표현식/[Flag];
-정규 표현식의 메서드
정규 표현식의 표현 방법
-기본 메타 문자 종류
- 문자 클래스의 종류
회원가입 유효성검사 예제
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script>
function checkMember(){
//1) 아디는 문자로 시작
let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
//2) 이름은 한글만 입력. 시작도 한글 끝도 한글. ^한글$
// + : 한 번 이상, * : 0번 이상
let regExpName = /^[가-힣]+$/;
//3) 비밀번호는 숫자만 입력 ^숫자$
let regExpPasswd = /^[0-9]*$/;
//4) 연락처 형식 준수(010-111-2222, 010-1111-2222)
// \d : 숫자 x{n} : x를 n번 반복
// \d{3} : 숫자가 딱 3회 반복. \d{3,4} : 숫자가 3이상 4이하 회 반복
let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;
//5) 이메일 형식 준수(tester-_.2a@korea_3.ac.kr)
// ^ : 시작 / $ : 끝 / .을 쓸 땐 \.으로 / ? : 있어도 되고 없어도 되고 / * : 0 이상 반복 / {2,3} : 2이상 3이하 반복
// [a-z] : a부터 z 사이 영소문자 중 한 글자
let regExpEmail =
/^[0-9|a-z|A-Z]([-_\.]?[0-9|a-z|A-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*(\.[a-zA-Z]{2,3}){1,2}$/i;
// form : object
let form = document.Member;
let id = form.id.value; //id
let passwd = form.passwd.value; //passwd
let name = form.name.value;//name
let phone = form.phone1.value+"-"+form.phone2.value+"-"+form.phone3.value;
let email = form.email.value;
// 아이디는 문자로 시작
if(!regExpId.test(id)){
alert("아이디는 문자로 시작해주세요");
form.id.select();
return;
}
if(!regExpName.test(name)){
alert("이름은 한글만 입력해주세요.");
form.name.select();
return;
}
if(!regExpPasswd.test(passwd)){
alert("비밀번호는 숫자만 입력해주세요.");
form.passwd.select();
return;
}
if(!regExpPhone.test(phone)){
alert("전화번호 양식에 맞게 입력해주세요");
form.phone2.select();
return;
}
if(!regExpEmail.test(email)){
alert("이메일 형식에 맞게 입력해주세요.");
form.email.select();
return;
}
// 유효성검사 통과
form.submit();
}
</script>
</head>
<body>
<h3>회원 가입</h3>
<!--
요청URL : validation05_process.jsp
요청파라미터 : {id=a001,passwd=1234, name=개똥이,phone1=010,phone2=1234,phone3=2211,
email=test@test.co.kr}
요청방식 : post
-->
<form name="Member" action="validation05_process.jsp" method="post">
<p>아이디 : <input type="text" name="id"/></p>
<p>비밀번호 : <input type="password" name="passwd"/></p>
<p>이름 : <input type="text" name="name"/></p>
<p>연락처 :
<select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> -
<input type="text" maxlength="4" size="4" name="phone2"/> -
<input type="text" maxlength="4" size="4" name="phone3"/>
</p>
<p>이메일 : <input type="text" name="email"/></p>
<!-- checkMember() : 핸들러함수 -->
<p><input type="button" value="가입하기" onclick="checkMember()"/></p>
</form>
</body>
</html>form 안에 submit 버튼을 button으로 바꿔준 후 핸들러함수(checkMember())를 지정해 작성해주었다.
'JSP' 카테고리의 다른 글
| [JSP] 시큐리티 (0) | 2023.07.10 |
|---|---|
| [JSP] 다국어 처리 (0) | 2023.07.10 |
| [JSP] 파일 업로드 (0) | 2023.07.05 |
| [JSP] 폼(form) 태그 (0) | 2023.07.03 |
| [JSP] 내장 객체 (0) | 2023.06.29 |
