기록
JSP 유효성검사 4 정규표현식 본문
유효성 검사: 데이터형식 유효성 검사
사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이
특정 형태에 적합한지 검사하기 위해 정규 표현식(reqular expression)을 사용.
1. Flag : /정규표현식/ 끝에 사용하며 생략 가능
( I aM falG)
- i(Ignore Case) : 대소문자 구별 없음.
- m(Multi Line) : 줄 바꿈 있니?
- g(Global) : 모든 패턴 검출
2. 메소드
- test() : 정규표현식.test(대상문자열) true/false 리턴 *****
- exec() : 정규표현식.exec(대상문자열) 패턴에 맞는 문자열 추출
exec() 메서드 사용
<%@ 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>
<!-- 유효성 검사: 데이터형식 유효성 검사
사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이
특정 형태에 적합한지 검사하기 위해 정규 표현식(reqular expression)을 사용.
1. Flag : /정규표현식/ 끝에 사용하며 생략 가능
( I aM falG)
- i(Ignore Case) : 대소문자 구별 없음.
- m(Multi Line) : 줄 바꿈 있니?
- g(Global) : 모든 패턴 검출
2. 메소드
- test() : 정규표현식.test(대상문자열) true/false 리턴 *****
- exec() : 정규표현식.exec(대상문자열) 패턴에 맞는 문자열 추출
-->
<form name="frm">
<p>제목 : <input type="text" name="title" /></p>
<!-- checkForm() : 핸들러함수 -->
<p><input type="button" value="전송" onclick="checkForm()" /></p>
</form>
<script type="text/javascript">
function checkForm(){
//정규식(Regular eExpression)
//정규식은 슬러시로 시작하여 슬러시로 끝남
// i : 대/소문자 무시
//주어진문자열에서 java를 검색(exec())
let regExp = /Java/i;
//제목의 데이터를 가져옴
let str = document.frm.title.value;
let result = regExp.exec(str);
console.log("result : "+result[0]);
}
</script>
</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 checkForm() {
//J/S
let str = document.frm.name.value;
console.log("str : "+str);
//정규식(이름은 숫자로 시작할 수 없다.)
//|(shift + 역슬러시) : or(또는) 파이프라인이라고 부름
let regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //첫글자가 문자니?
//정규식.test(대상문자열) => true/false
if(!regExp.test(str)){ //첫글자가 문자가 아니면
alert("이름은 숫자로 시작할 수 없습니다.");
return; //함수종료
}
}
</script>
<script type="text/javascript">
$(function(){
$('#btnJquery').on('click',function(){
let str = $("input[name='name']").val();
console.log("str : "+str);
});
});
</script>
</head>
<body>
<!-- action이 생략되었다면?
action="현재jsp"
method="get"
-->
<form name="frm">
<p>이름 : <input type="text" name="name" /></p>
<p><input type="button" id="btn" value="전송(핸들러)" onclick="checkForm()"/></p>
<p><input type="button" id="btnJquery" 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>
<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
function checkMember(){
//정규표현식
let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //아이디는 문자로 시작해주세요
let regExPasswd =/^[0-9]*$/; //비밀번호는 숫자만 입력해주세요
let regExpName= /^[가-힣]*$/; //이름은 한글만 입력해주세요 +:1이상, *:0이상
let regExpPhone= /^\d{3}-\d{3,4}-\d{4}$/; //연락처형식을 확인해주세요 010-123-4567
let regExpEamil= /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //이메일형식을 확인해주세요
let reg = /\s/g; //공백제거
let form = document.Member;
let id = form.id.value;
let passwd = form.passwd.value;
let name = form.name.value;
let phone = form.phone1.value + "-"
+ form.phone2.value +"-"
+ form.phone3.value;
form.phoneOne.value=phone;
let email = form.email.value;
console.log("id : "+id
+ ", passwd : "+passwd
+ ", name : "+name
+ ", phone : "+phone
+ ", email : "+email);
//1)아이디는 문자로 시작해주세요
if(!regExpId.test(id)){
alert("아이디는 문자로 시작해주세요");
form.id.select();
return; //함수종료
}
/* if(!reg.test(id)){
alert("공백은 사용불가능합니다.");
form.id.select();
return; //함수종료
} */
//2)이름은 한글만 입력해주세요 ex)탐크루즈
if(!regExpName.test(name)){
alert("이름은 한글만 입력해주세요");
form.name.select();
return;
}
//3) 비밀번호는 숫자만 입력해주세요
if(!regExPasswd.test(passwd)){
alert("비밀번호는 숫자만 입력해주세요");
form.passwd.select();
return;
}
//4)연락처 형식에 맞추자
if(!regExpPhone.test(phone)){
alert("연락처형식을 확인해주세요");
return;
}
//5)이메일 입력을 확인해주세요
if(!regExpEamil.test(email)){
alert("이메일형식을 확인해주세요");
form.eamil.select();
return;
}
//if를 모두 통과했다면
form.submit();
}
</script>
<!-- 제이쿼리 -->
<script type="text/javascript">
$(function(){
//정규표현식
$('#sub').on('click',function(){
let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //아이디는 문자로 시작해주세요
let regExPasswd =/^[0-9]*$/; //비밀번호는 숫자만 입력해주세요
let regExpName= /^[가-힣]*$/; //이름은 한글만 입력해주세요 +:1이상, *:0이상
let regExpPhone= /^\d{3}-\d{3,4}-\d{4}$/; //연락처형식을 확인해주세요 010-123-4567
let regExpEamil= /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //이메일형식을 확인해주세요
let reg = /\s/g; //공백제거
let id = $('#id').val();
let passwd = $('#passwd').val();
let name = $('#name').val();
/* let phone = $(":select").val(); */
let phone = $('#phone1').val() + "-"
+ $('#phone2').val() +"-"
+ $('#phone3').val();
let email = $('#email').val();
console.log("id : "+id
+ ", passwd : "+passwd
+ ", name : "+name
+ ", phone : "+phone
+ ", email : "+email);
//1)아이디는 문자로 시작해주세요
if(!regExpId.test(id)){
alert("아이디는 문자로 시작해주세요");
$('#id').focus();
return; //함수종료
}
/* if(!reg.test(id)){
alert("공백은 사용불가능합니다.");
form.id.select();
return; //함수종료
} */
//2)이름은 한글만 입력해주세요 ex)탐크루즈
if(!regExpName.test(name)){
alert("이름은 한글만 입력해주세요");
$('#name').focus();
return;
}
//3) 비밀번호는 숫자만 입력해주세요
if(!regExPasswd.test(passwd)){
alert("비밀번호는 숫자만 입력해주세요");
$('#passwd').focus();
return;
}
//4)연락처 형식에 맞추자
if(!regExpPhone.test(phone)){
alert("연락처형식을 확인해주세요");
$('#phone2').focus();
return;
}
//5)이메일 입력을 확인해주세요
if(!regExpEamil.test(email)){
alert("이메일형식을 확인해주세요");
$('#email').focus();
return;
}
//if문을 모두통과했다면
$('form').submit();
});
$('#phone1').on('change',function(){
$('select option').css("background-color","");
$(":selected").css("background-color", "blue");
console.log($(":selected").val());
});
});
</script>
</head>
<body>
<h3>회원 가입</h3>
<!-- 폼페이지 -->
<form action="validation07_process.jsp" name="Member" method="post">
<!-- 폼데이터 -->
<p>아이디 : <input type="text" name="id" id="id"/></p>
<p>비밀번호 : <input type="password" name="passwd" id="passwd" /></p>
<p>이름 : <input type="text" name="name" id="name"/></p>
<p>연락처 :
<input type="hidden" name="phoneOne" id="phoneOne" />
<select name="phone1" id="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" id="phone2" /> -
<input type="text" maxlength="4" size="4" name="phone3" id="phone3"/>
</p>
<p>이메일 : <input type="text" name="email" id="email"/></p>
<p><input type="button" value="가입하기(핸들러)" onclick="checkMember()" /></p>
<p><input type="button" value="가입하기" class="btn btn-primary" id="sub"/></p>
</form>
</body>
</html>
'JSP' 카테고리의 다른 글
| JSP JSTL fmt 태그, PropertiesEditor 설치 (0) | 2023.01.11 |
|---|---|
| JSP 상품등록 페이지 (유효성검사,상품코드 +1 메서드) 추가 (0) | 2023.01.10 |
| JSP 유효성검사 (validation) 3 영문소문자, 숫자 유효성검사 (0) | 2023.01.06 |
| JSP 유효성검사 (validation) 2 글자수 유효성 검사 (0) | 2023.01.06 |
| JSP 유효성검사 (validation) 1 (0) | 2023.01.05 |
'JSP' Related Articles
more
Comments